დოკუმენტაცია და მაგალითები ცხრილების სტილისტიკისთვის (მათი გავრცელებული გამოყენება JavaScript დანამატებში) Bootstrap-ით.
ამ გვერდზე
მიმოხილვა
ელემენტების ფართო გამოყენების გამო <table>მესამე მხარის ვიჯეტებში, როგორიცაა კალენდრები და თარიღის ამომრჩევები, Bootstrap-ის ცხრილები ნებადართულია . დაამატეთ საბაზისო კლასი .tableნებისმიერს <table>, შემდეგ გააფართოვეთ ჩვენი სურვილისამებრ მოდიფიკატორის კლასებით ან მორგებული სტილებით. ცხრილის ყველა სტილი არ არის მემკვიდრეობით მიღებული Bootstrap-ში, რაც ნიშნავს, რომ ნებისმიერი ჩადგმული ცხრილი შეიძლება იყოს დამოუკიდებლად მშობლისგან.
ცხრილის ყველაზე ძირითადი მარკირების გამოყენებით, აი, როგორ .tableგამოიყურება დაფუძნებული ცხრილები Bootstrap-ში.
#
Პირველი
ბოლო
Სახელური
1
მარკო
ოთო
@mdo
2
იაკობ
თორნტონი
@ fat
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
იაკობ
თორნტონი
@ fat
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>შეიფუთება <tbody>, რითაც ჩვენი სელექტორები იმუშავებენ ისე, როგორც დანიშნულებისამებრ.
ანატომია
მაგიდის თავი
ცხრილებისა და მუქი ცხრილების მსგავსად, გამოიყენეთ მოდიფიკატორის კლასები .table-lightან .table-darkიმისათვის, რომ <thead>s გამოჩნდეს ღია ან მუქი ნაცრისფერი.
A <caption>ფუნქციონირებს, როგორც სათაური მაგიდისთვის. ის ეხმარება მომხმარებლებს, რომლებსაც აქვთ ეკრანის წამკითხველი, იპოვონ ცხრილი და გაიგონ, რაზეა საუბარი და გადაწყვიტონ, სურთ თუ არა მისი წაკითხვა.
მომხმარებელთა სია
#
Პირველი
ბოლო
Სახელური
1
მარკო
ოთო
@mdo
2
იაკობ
თორნტონი
@ fat
3
ლარი ჩიტი
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
თქვენ ასევე შეგიძლიათ დადოთ <caption>მაგიდის ზედა ნაწილში .caption-top.
მომხმარებელთა სია
#
Პირველი
ბოლო
Სახელური
1
მარკო
ოთო
@mdo
2
იაკობ
თორნტონი
@ fat
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}საჭიროებისამებრ საპასუხო ცხრილების შესაქმნელად კონკრეტულ წყვეტის წერტილამდე. ამ წყვეტის წერტილიდან და ზემოთ, ცხრილი ნორმალურად იქცევა და არ გადახვევს ჰორიზონტალურად.
ეს ცხრილები შეიძლება გატეხილი გამოჩნდეს მანამ, სანამ მათი საპასუხო სტილები არ ვრცელდება ხედის პორტის კონკრეტულ სიგანეზე.