Дакументацыя і прыклады выбарнага стылю табліц (улічваючы іх шырокае выкарыстанне ў плагінах JavaScript) з дапамогай Bootstrap.
Прыклады
З-за шырокага выкарыстання табліц у віджэтах іншых вытворцаў, такіх як календары і сродкі выбару даты, мы распрацавалі нашы табліцы для выбару . Проста дадайце базавы клас .tableу любы <table>, а затым пашырыце карыстальніцкімі стылямі або нашымі рознымі ўключанымі класамі-мадыфікатарамі.
Выкарыстоўваючы самую базавую разметку табліц, вось як .tableтабліцы на аснове выглядаюць у Bootstrap. Усе стылі табліц успадкоўваюцца ў Bootstrap 4 , што азначае, што любыя ўкладзеныя табліцы будуць стылізаваны такім жа чынам, што і бацькоўскія.
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Лары |
птушка |
@twitter |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Вы таксама можаце інвертаваць колеры - са светлым тэкстам на цёмным фоне - з дапамогай .table-dark.
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Лары |
птушка |
@twitter |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Варыянты падгалоўя стала
Падобна табліцам і цёмным табліцам, выкарыстоўвайце класы-мадыфікатары .thead-lightабо .thead-dark, каб яны <thead>выглядалі светла- або цёмна-шэрымі.
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Лары |
птушка |
@twitter |
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Лары |
птушка |
@twitter |
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Паласатыя шэрагі
Выкарыстоўвайце .table-striped, каб дадаць зебрападобныя паласы ў любы радок табліцы ў <tbody>.
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Лары |
птушка |
@twitter |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Лары |
птушка |
@twitter |
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Абрамлены стол
Дадайце .table-borderedдля межаў з усіх бакоў табліцы і вочак.
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Птушка Лары |
@twitter |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Птушка Лары |
@twitter |
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Стол без палёў
Дадайце .table-borderlessдля табліцы без межаў.
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Птушка Лары |
@twitter |
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderlessтаксама можна выкарыстоўваць на цёмных сталах.
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Птушка Лары |
@twitter |
<table class="table table-borderless table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Навісныя шэрагі
Дадайце .table-hover, каб уключыць стан навядзення на радкі табліцы ў <tbody>.
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Птушка Лары |
@twitter |
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Птушка Лары |
@twitter |
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Столік
Дадайце .table-sm, каб зрабіць табліцы больш кампактнымі, скараціўшы пракладку вочак напалову.
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Птушка Лары |
@twitter |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Птушка Лары |
@twitter |
<table class="table table-sm table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Кантэкстныя заняткі
Выкарыстоўвайце кантэкстныя класы для афарбоўкі радкоў табліцы або асобных вочак.
| Клас |
Загаловак |
Загаловак |
| Актыўны |
Сотавы |
Сотавы |
| Па змаўчанні |
Сотавы |
Сотавы |
| Першасны |
Сотавы |
Сотавы |
| Другасны |
Сотавы |
Сотавы |
| Поспех |
Сотавы |
Сотавы |
| Небяспека |
Сотавы |
Сотавы |
| Папярэджанне |
Сотавы |
Сотавы |
| Інфармацыя |
Сотавы |
Сотавы |
| Святло |
Сотавы |
Сотавы |
| Цёмны |
Сотавы |
Сотавы |
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Звычайныя варыянты фону табліцы недаступныя з цёмнай табліцай, аднак вы можаце выкарыстоўваць тэкставыя або фонавыя ўтыліты для дасягнення падобных стыляў.
| # |
Загаловак |
Загаловак |
| 1 |
Сотавы |
Сотавы |
| 2 |
Сотавы |
Сотавы |
| 3 |
Сотавы |
Сотавы |
| 4 |
Сотавы |
Сотавы |
| 5 |
Сотавы |
Сотавы |
| 6 |
Сотавы |
Сотавы |
| 7 |
Сотавы |
Сотавы |
| 8 |
Сотавы |
Сотавы |
| 9 |
Сотавы |
Сотавы |
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
Перадача значэння дапаможных тэхналогій
Выкарыстанне колеру для дадання сэнсу забяспечвае толькі візуальную індыкацыю, якая не будзе перададзена карыстальнікам дапаможных тэхналогій, такіх як праграмы чытання з экрана. Пераканайцеся, што інфармацыя, пазначаная колерам, альбо відавочная з самага змесціва (напрыклад, бачнага тэксту), альбо ўключана з дапамогай альтэрнатыўных сродкаў, такіх як дадатковы тэкст, схаваны разам з .sr-onlyкласам.
Стварыце адаптыўныя табліцы, абгарнуўшы любую .tableтабліцай .table-responsive{-sm|-md|-lg|-xl}, каб табліца пракручвалася гарызантальна ў кожнай max-widthкропцы перапынку да (але не уключаючы) 576 пікселяў, 768 пікселяў, 992 пікселяў і 1120 пікселяў адпаведна.
Звярніце ўвагу, што паколькі браўзеры ў цяперашні час не падтрымліваюць
кантэкстныя запыты дыяпазону , мы абыходзім абмежаванні
прэфіксаў min-іmax- вокнаў прагляду з дробавай шырынёй (якія могуць узнікаць пры пэўных умовах, напрыклад, на прыладах з высокім dpi), выкарыстоўваючы значэнні з больш высокай дакладнасцю для гэтых параўнанняў .
Тытры
Функцыянуе <caption>як загаловак табліцы. Гэта дапамагае карыстальнікам з праграмамі чытання з экрана знайсці табліцу і зразумець, пра што яна, а таксама вырашыць, ці хочуць яны яе прачытаць.
Спіс карыстальнікаў
| # |
Першы |
Апошні |
Ручка |
| 1 |
Марк |
Ота |
@mdo |
| 2 |
Якаў |
Торнтан |
@тоўсты |
| 3 |
Лары |
птушка |
@twitter |
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Адаптыўныя табліцы
Адаптыўныя табліцы дазваляюць з лёгкасцю пракручваць табліцы гарызантальна. .tableЗрабіце любую табліцу спагаднай ва ўсіх вокнах прагляду , абгарнуўшы .table-responsive. Або выберыце максімальную кропку перапынку, з якой будзе мець адаптыўную табліцу, выкарыстоўваючы .table-responsive{-sm|-md|-lg|-xl}.
Вертыкальнае абразанне/абсячэнне
Адаптыўныя табліцы выкарыстоўваюць overflow-y: hidden, які выразае любы кантэнт, які выходзіць за ніжні або верхні край табліцы. У прыватнасці, гэта можа адрэзаць выпадальныя меню і іншыя віджэты іншых вытворцаў.
Заўсёды спагадны
Праз кожную кропку перапынку выкарыстоўвайце .table-responsiveдля гарызантальнай пракруткі табліц.
| # |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
| 1 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| 2 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| 3 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Канкрэтная кропка супыну
Выкарыстоўвайце .table-responsive{-sm|-md|-lg|-xl}пры неабходнасці для стварэння адаптыўных табліц да пэўнай кропкі перапынку. Пачынаючы з гэтай кропкі перапынку і ўверх, табліца будзе паводзіць сябе нармальна і не будзе пракручвацца па гарызанталі.
Гэтыя табліцы могуць выглядаць зламанымі, пакуль іх адаптыўныя стылі не будуць прымяняцца пры пэўнай шырыні акна прагляду.
| # |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
| 1 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| 2 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| 3 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| # |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
| 1 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| 2 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| 3 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| # |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
| 1 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| 2 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| 3 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| # |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
Загаловак |
| 1 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| 2 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
| 3 |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
Сотавы |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>