Bootstrap Table Classes - Bootstrap5 Tutorial 13
Notes for You:: Bootstrap Table Classes.
table: sets the table width to 100% and adds bottom border to all table rows
﹤table class="table"﹥
﹤thead﹥
﹤tr﹥
﹤th﹥Some Text﹤/th﹥﹤th﹥Some Text﹤/th﹥
﹤/tr﹥
﹤/thead﹥
﹤tbody﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tbody﹥
﹤tfoot﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tfoot﹥
﹤/table﹥
table & table-striped : sets light gray background color to alternative rows of the table body tag
﹤table class="table table-striped"﹥
﹤thead﹥
﹤tr﹥
﹤th﹥Some Text﹤/th﹥﹤th﹥Some Text﹤/th﹥
﹤/tr﹥
﹤/thead﹥
﹤tbody﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tbody﹥
﹤tfoot﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tfoot﹥
﹤/table﹥
table & table-bordered: creates a table with border
﹤table class="table table-bordered"﹥
﹤thead﹥
﹤tr﹥
﹤th﹥Some Text﹤/th﹥﹤th﹥Some Text﹤/th﹥
﹤/tr﹥
﹤/thead﹥
﹤tbody﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tbody﹥
﹤tfoot﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tfoot﹥
﹤/table﹥
table & table-borderless : creates a table without border
﹤table class="table table-borderless"﹥
﹤thead﹥
﹤tr﹥
﹤th﹥Some Text﹤/th﹥﹤th﹥Some Text﹤/th﹥
﹤/tr﹥
﹤/thead﹥
﹤tbody﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tbody﹥
﹤tfoot﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tfoot﹥
﹤/table﹥
table & table-hover : adds hover effect to rows of the table body tag
﹤table class="table table-hover"﹥
﹤thead﹥
﹤tr﹥
﹤th﹥Some Text﹤/th﹥﹤th﹥Some Text﹤/th﹥
﹤/tr﹥
﹤/thead﹥
﹤tbody﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tbody﹥
﹤tfoot﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tfoot﹥
﹤/table﹥
Table Color Related Classes:
- allow us to create colored tables
table-primary
table-secondary
table-success
table-info
table-warning
table-danger
table-dark
table-light
﹤table class="table table-primary table-hover"﹥
﹤thead﹥
﹤tr﹥
﹤th﹥Some Text﹤/th﹥﹤th﹥Some Text﹤/th﹥
﹤/tr﹥
﹤/thead﹥
﹤tbody﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tbody﹥
﹤tfoot﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tfoot﹥
﹤/table﹥
Table Heading Row Color Related Classes:
- allow us to set dark or light gray background color to table heading row
table-dark
table-light
﹤table class="table table-primary table-hover"﹥
﹤thead class="table-dark"﹥
﹤tr﹥
﹤th﹥Some Text﹤/th﹥﹤th﹥Some Text﹤/th﹥
﹤/tr﹥
﹤/thead﹥
﹤tbody﹥
﹤tr﹥
﹤td﹥Some Text﹤/td﹥﹤td﹥Some Text﹤/td﹥
﹤/tr﹥
﹤/tbody﹥
﹤/table﹥
Note:
- replace ﹤ with less-than symbol.
- replace ﹥ with greater-than symbol.
=========================================
Follow the link for next video:
https://youtu.be/KWuBQ1mrfFM
Follow the link for previous video:
https://youtu.be/-yZHOHX8iIc
=========================================
Bootstrap5 Tutorials Playlist:
https://www.youtube.com/playlist?list=PLdE8ESr9Th_tgGKttdOp9YWporo2zEr5Q
Bootstrap4 Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_vnCOUPx1fhQLRZGENyfuMG
=========================================
Watch my other useful tutorials:-
PHP Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_s8zash4d8He_49QS_VVmAG
=========================================
Subscribe to our YouTube channel:-
https://www.youtube.com/chidrestechtutorials
=========================================
Hash Tags:-
#ChidresTechTutorials #Bootstrap #BootstrapTutorial #Bootstrap5
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «Bootstrap Table Classes - Bootstrap5 Tutorial 13», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.