Документација и примери за стилизирање на табели (со оглед на нивната распространета употреба во приклучоците за 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>ќе бидат завиткани во а <tbody>, со што нашите избирачи ќе работат како што е предвидено.
Анатомија
Глава на маса
Слично на табелите и темните табели, користете ги класите на модификатори .table-lightили .table-darkза да направите <thead>s да изгледа светло или темно сиво.
А <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променливата.