Bootstrap менен таблицаларды стилдештирүү үчүн документация жана мисалдар (алардын JavaScript плагиндеринде кеңири колдонулушун эске алуу менен).
Мисалдар
Календарлар жана даталарды тандагычтар сыяктуу үчүнчү тараптын виджеттери боюнча таблицаларды кеңири колдонгондуктан, биз таблицаларыбызды кошулууга ылайыкташтырдык . Жөн гана негизги классты .tableкаалаган класска кошуп <table>, андан кийин ыңгайлаштырылган стилдер же биздин ар кандай камтылган өзгөрткүч класстарыбыз менен кеңейтиңиз.
Эң негизги таблица белгилерин колдонуу менен .table, Bootstrap'те негизделген таблицалар кантип көрүнөт. Бардык таблица стилдери Bootstrap 4те мураска алынган , башкача айтканда, бардык уя салынган таблицалар ата-эне стилиндей эле стилделет.
.table-borderedЖадыбалдын жана уячалардын бардык тарабындагы чектерди кошуңуз .
#
Биринчи
Акыркы
Handle
1
Марк
Отто
@mdo
2
Жакып
Торнтон
@fat
3
Ларри куш
@twitter
<tableclass="table table-bordered"><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>
#
Биринчи
Акыркы
Handle
1
Марк
Отто
@mdo
2
Жакып
Торнтон
@fat
3
Ларри куш
@twitter
<tableclass="table table-bordered table-dark"><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>
Чексиз үстөл
.table-borderlessЧек аралары жок таблицага кошуу .
#
Биринчи
Акыркы
Handle
1
Марк
Отто
@mdo
2
Жакып
Торнтон
@fat
3
Ларри куш
@twitter
<tableclass="table table-borderless"><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>
.table-borderlessкараңгы столдордо да колдонсо болот.
#
Биринчи
Акыркы
Handle
1
Марк
Отто
@mdo
2
Жакып
Торнтон
@fat
3
Ларри куш
@twitter
<tableclass="table table-borderless table-dark"><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>
Үзүлүүчү катарлар
.table-hoverичинде таблицанын саптарында өтүүчү абалды иштетүү үчүн кошуу <tbody>.
#
Биринчи
Акыркы
Handle
1
Марк
Отто
@mdo
2
Жакып
Торнтон
@fat
3
Ларри куш
@twitter
<tableclass="table table-hover"><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>
#
Биринчи
Акыркы
Handle
1
Марк
Отто
@mdo
2
Жакып
Торнтон
@fat
3
Ларри куш
@twitter
<tableclass="table table-hover table-dark"><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>
Кичинекей үстөл
.table-smКлетка толтургучтарын экиге бөлүп, үстөлдөрдү компакттуу кылуу үчүн кошуңуз .
#
Биринчи
Акыркы
Handle
1
Марк
Отто
@mdo
2
Жакып
Торнтон
@fat
3
Ларри куш
@twitter
<tableclass="table table-sm"><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>
#
Биринчи
Акыркы
Handle
1
Марк
Отто
@mdo
2
Жакып
Торнтон
@fat
3
Ларри куш
@twitter
<tableclass="table table-sm table-dark"><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 rows --><trclass="table-active">...</tr><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-active">...</td><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>
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</td></tr>
Көмөкчү технологияларга маани берүү
Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (мисалы, көрүнүүчү текст) ачык-айкын болушун же .sr-onlyкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.
576px, 768px, 992px жана 1120px чейин (бирок аны кошпогондо) ар бир үзүлүү чекинде таблицаны туурасынан сыдыртып, каалаганын ороп .table, жооп берүүчү таблицаларды түзүңүз ..table-responsive{-sm|-md|-lg|-xl}max-width
Браузердер учурда диапазондун контексттик сурамдарын
колдобогондуктан
, биз бул салыштыруулар үчүн жогорку тактыктагы маанилерди колдонуу менен, бөлчөк кеңдиктеги (мисалы, жогорку dpi түзмөктөрүндө белгилүү бир шарттарда пайда болушу мүмкүн ) чектөөлөр min-менен max-префикстердин жана көрүү портторунун тегерегинде иштейбиз.
.
Коштомо жазуулар
А <caption>столдун аталышы сыяктуу функцияларды аткарат. Бул экранды окугучтары бар колдонуучуларга таблицаны табууга жана ал эмне жөнүндө экенин түшүнүүгө жана аны окууну каалаарын чечүүгө жардам берет.
Колдонуучулардын тизмеси
#
Биринчи
Акыркы
Handle
1
Марк
Отто
@mdo
2
Жакып
Торнтон
@fat
3
Ларри
чымчык
@twitter
<tableclass="table"><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>
Жооптуу таблицалар
Жооптуу таблицалар таблицаларды горизонталдуу түрдө оңой жылдырууга мүмкүндүк берет. .tableменен ороп, каалаган таблицаны бардык көрүнүштөр боюнча жооп бериңиз .table-responsive. Же колдонуу менен жооп берүүчү таблицага ээ боло турган максималдуу үзүү чекин тандаңыз .table-responsive{-sm|-md|-lg|-xl}.
Вертикалдуу кесүү/кесүү
Жооптуу таблицалар overflow-y: hiddenүстөлдүн астыңкы же үстүнкү четтеринен ашкан бардык мазмунду өчүрүүчү колдонот. Атап айтканда, бул ачылуучу менюларды жана башка үчүнчү тараптын виджеттерин кесип алат.
Ар дайым жооп берет
Ар бир үзүү чекиттеринде .table-responsiveгоризонталдуу сыдыруучу таблицалар үчүн колдонуңуз.
.table-responsive{-sm|-md|-lg|-xl}Белгилүү бир үзгүлтүккө чейин жооп берүүчү таблицаларды түзүү үчүн керек болсо колдонуңуз . Ошол үзгүлтүккө чейин жана андан өйдө, таблица кадимкидей иштейт жана туурасынан жылбайт.
Бул таблицалар алардын жооп берүүчү стилдери белгилүү бир көрүү терезесинин кеңдигинде колдонулмайынча сынган көрүнүшү мүмкүн.