Փաստաթղթեր և օրինակներ՝ աղյուսակների ընտրության ձևավորման համար (հաշվի առնելով դրանց տարածված օգտագործումը 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>:
#
Առաջին
Վերջին
Բռնակ
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-երը thead, tbodyև tfoot-ում, մեր ընտրիչը առանց դրա բավականին երկար տեսք կունենա: Որպես այդպիսին, մենք օգտագործում ենք բավականին տարօրինակ տեսք ունեցող .table > :not(caption) > * > *ընտրիչը՝ թիրախավորելու բոլոր tds և ths-երը .table, բայց ոչ պոտենցիալ ներդիր աղյուսակներից ոչ մեկը:
Նկատի ունեցեք, որ եթե դուք ավելացնեք <tr>s որպես աղյուսակի ուղղակի երեխաներ, դրանք լռելյայն <tr>կփաթաթվեն a- <tbody>ով, այդպիսով մեր ընտրիչները կաշխատեն ըստ նախատեսվածի:
Անատոմիա
Սեղանի գլուխ
Աղյուսակների և մուգ աղյուսակների նման, օգտագործեք մոդիֆիկատորների դասերը .table-lightկամ s-ը բաց կամ մուգ մոխրագույն տեսք .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փոփոխականով: