Bootstrap көмегімен кестелерді сәндеуге (олардың JavaScript плагиндерінде кеңінен қолданылуын ескере отырып) қосылуға арналған құжаттама және мысалдар.
Бұл бетте
Шолу
<table>Күнтізбелер мен күн таңдаушылары сияқты үшінші тарап виджеттері арқылы элементтерді кеңінен пайдалануына байланысты Bootstrap кестелері қосылуға мүмкіндік береді . Негізгі классты .tableкез келгенге қосыңыз <table>, содан кейін қосымша модификатор сыныптарымен немесе реттелетін мәнерлермен кеңейтіңіз. Барлық кесте мәнерлері Bootstrap бағдарламасында мұраланбайды, яғни кез келген кірістірілген кестелерді ата-анадан тәуелсіз стильдеуге болады.
Ең негізгі кестені белгілеуді пайдаланып, .tableBootstrap қолданбасында негізделген кестелер қалай көрінеді.
#
Бірінші
Соңғы
Тұтқаны
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>.
#
Бірінші
Соңғы
Тұтқаны
1
белгі
Отто
@mdo
2
Джейкоб
Торнтон
@май
3
Ларри құс
@twitter
<tableclass="table table-striped">
...
</table>
Бұл сыныптарды кесте нұсқаларына да қосуға болады:
--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 мәндерін белгілеуіміз керек болғандықтан , онсыз селекторымыз өте ұзақ көрінеді. Осылайша, біз барлық s және s бағыттау үшін өте біртүрлі көрінетін селекторды пайдаланамыз , бірақ кез келген ықтимал кірістірілген кестелердің ешқайсысы.theadtbodytfoot.table > :not(caption) > * > *tdth.table
<tr>Егер кестенің тікелей еншілестері ретінде s қоссаңыз , олар әдепкі <tr>бойынша a ішіне оралатынын <tbody>ескеріңіз, осылайша біздің селекторлар белгіленгендей жұмыс істейді.
Анатомия
Үстел басы
Кестелер мен күңгірт кестелерге ұқсас, модификатор сыныптарын пайдаланыңыз .table-lightнемесе s ашық немесе қою сұр болып көрінуі .table-darkүшін .<thead>
Кестеге арналған <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>
Жауапты кестелер
Жауапты кестелер кестелерді көлденеңінен оңай айналдыруға мүмкіндік береді. .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айнымалы арқылы жеңілдетілген.