TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити таблиці Bootstrap 5?

1

Bootstrap дозволяє створювати красиві таблиці за допомогою фреймворка CSS. Версія 4 містить деякі нові класи для інвертування кольору таблиці та реалізації реакції таблиці. Ви також можете легко змінювати таблиці різних типів за допомогою останньої версії 5. У цьому підручнику ми обговоримо різні можливості створення таблиць за допомогою Bootstrap 5. Ви можете завантажити файли, використані в цьому підручнику, тут.

Завантажувальна таблиця використовує всі теги HTML -таблиці із заголовком всередині

теги. У нашому прикладі давайте створимо простий аркуш оцінок у форматі таблиці з чотирма іменами учнів (у рядках) та п’ятьма предметами із середнім відсотком (у стовпцях). Нижче наведено код таблиці Bootstrap за замовчуванням.

За замовчуванням єдиним класом CSS, необхідним для створення таблиці Bootstrap, є клас “table", що застосовується безпосередньо до елемента таблиці HTML. Вам не потрібно створювати

тег для вставлення таблиць у Bootstrap. Тег за замовчуванням дасть такий результат:

Як створити таблиці Bootstrap 5?

Інвертування кольорів столу

Bootstrap 4 дозволяє інвертувати колір вашої таблиці, додавши до таблиці "table-inverse"

тег. Він перетворить фон у темний, а текст у світлі кольори. Код повинен виглядати так:

<table class="table table-inverse"> All content remains same here similar to default table. <table>

Обернена таблиця матиме дуже темне та привабливе тло, як показано нижче:

Як створити таблиці Bootstrap 5?

Таблиця зворотного заголовка

У попередньому випадку до всієї таблиці застосовувався клас "інверсія таблиці". Bootstrap 4 також дозволяє інвертувати лише тло заголовка та кольори тексту. Щоб інвертувати заголовок, просто додайте клас “thead-inverse” до

тег.

<table class="table"> <thead class="thead-inverse"> </thead> </table>

І наша таблиця аркушів буде мати чорний рядок заголовка, як показано нижче:

Як створити таблиці Bootstrap 5?

Це ще не все !!! З Bootstrap є ще багато варіантів. Створимо ще кілька варіацій.

Смугастий Bootstrap 4 Таблиця

Смугаста таблиця дозволяє створювати альтернативні кольори для рядків. Просто додайте "смугастий стіл" до існуючого класу "таблиця", і таблиця матиме візерунок з смугами. Світло -сірий колір фону буде застосовано до всіх рядків з непарними номерами, починаючи з першого рядка.

<table class="table table-striped"> </table>

Смугаста таблиця переважно вважається кращою для диференціації рядків та демонстрації вмісту відвідувачам.

Як створити таблиці Bootstrap 5?

Таблиця з кордоном Bootstrap

Це просто додасть рамку до таблиці за замовчуванням. Вам потрібно лише додати клас "з таблицею" до існуючого класу "таблиця".

<table class="table table-bordered"> </table>

Наша таблиця аркушів з рамками має виглядати так:

Як створити таблиці Bootstrap 5?

Ви також можете легко створити облямований стіл зі смугами на рядках.

<table class="table table-striped table-bordered"> </table>

Таблиця з ефектами наведення в рядках

Як щодо додавання ефектів наведення до вашої таблиці? Клас "table-hover" зробить це за вас. Наведіть курсор миші на таблицю, щоб побачити відповідний рядок, виділений світло -сірим кольором фону.

<table class="table table-hover"> </table>

Нижче наведено, як повинна виглядати ваша таблиця під час переміщення миші у другому рядку.

Як створити таблиці Bootstrap 5?

Адаптивна завантажувальна таблиця для пристроїв розміром менше 768 пікселів

Створити адаптивну таблицю в Bootstrap 4 дуже просто. Додавати додаткові не потрібно

для підвищення чуйності. Просто вставте клас "що відповідає таблиці", горизонтальна смуга прокрутки буде автоматично додана до таблиці при перегляді у веб-переглядачі розміром екрану менше 768 пікселів.

<table class="table table-responsive"> </table>

Ось як буде виглядати наша адаптивна таблиця. Пам’ятайте, що горизонтальна смуга прокрутки з’явиться лише тоді, коли таблицю переглядають із розміром екрана менше 768 пікселів. Інакше ви не знайдете різниці порівняно зі звичайною таблицею Bootstrap.

Як створити таблиці Bootstrap 5?

Завантажувальна таблиця зі стисненим текстом

Іноді доводиться стискати висоту столу, щоб зменшити займаний простір. Bootstrap дозволяє це зробити, додавши клас "table-sm" до існуючого класу "table", як показано нижче:

<table class="table table-sm"> </table>

Це видалить відступ та зробить висоту столу компактною.

Як створити таблиці Bootstrap 5?

Створення завантажувальної таблиці з кольором фону

Наразі ми обговорювали створення простої таблиці або мати за замовчуванням світло -сірий фон для рядків. Bootstrap також дозволяє фарбувати клітинки та рядки таблиці, щоб зробити її красивою. Ви можете виділити будь -які рядки або будь -які клітинки таблиці п’ятьма різними кольорами. Існує два набори класів CSS, які допомагають вам додавати фонові кольори – один – це контекстні класи, а інший – фонові класи утиліти. У таблиці нижче пояснюються різні варіанти:

Таблиця Контекстуальні класи
таблиця-активна Світло -сірий колір наведення
таблиця-успіх Світло -зелений успіх або позитивна дія
таблиця-інформація Світло -блакитний для інформаційного повідомлення
таблиця-попередження Світло -жовтий для попередження
стіл-небезпека Світло -червоний для позначення небезпеки
таблиця-первинна Світло -синій для позначення основного кольору в Bootstrap
таблиця-вторинна Світло -червоний для позначення небезпеки
настільний світильник Світло -сірий для позначення відсутності кольору
темний стіл Світло -чорний для позначення темного
Допоміжні утиліти / Контекстуальні класи
bg-первинний Середньо -синій як основний колір
bg-успіх Зелений ліс до успіху
bg-попередження

Зелений колір вільної мови  для попередження

bg-info Світло -морський зелений для інформації
bg-небезпека Червоний (кіновар) для небезпеки
bg-light Самотність для світла
bg-темний Колір міражу для темних
bg-вторинний Колір алюмінію для вторинного

Пам’ятайте, що ці класи можна застосовувати до окремих рядків та комірок таблиці Bootstrap у будь -якій комбінації.

Кольорові рядки з контекстними класами

Давайте застосуємо контекстуальні класи до нашої таблиці аркушів оцінок, щоб побачити їх у дії. Код нижче застосовує клас "table-active" до першого рядка таблиці, щоб змінити колір фону на світло-сірий.

<table class="table"> <tr class="table-active"> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

Нижче наведено, як буде виглядати повна таблиця, коли ви застосуєте класи «таблиця-успіх», «таблиця-попередження» та «таблиця-небезпека» до другої, третьої та четвертої

елементи таблиці.

Як створити таблиці Bootstrap 5?

Кольорові рядки з кольорами фону

Подібно до контекстних класів таблиці, ви можете застосовувати кольори фону до рядків за допомогою фонових контекстних класів.

<table class="table"> <tr class="bg-success"> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

Нижче наведено привабливу таблицю, у якій до рядків застосовано “bg-success”, “bg-hazard”, “bg-warning”, “bg-info” та інші класи фонової утиліти.

Як створити таблиці Bootstrap 5?

Кольорові клітинки з контекстними класами

Кожну клітинку таблиці Bootstrap можна застосувати до одного з контекстних класів, щоб виділити її з інших клітинок. Це буде дуже корисно, якщо у вас є більша таблиця і ви хочете виділити лише кілька клітинок. Код нижче показує застосування контекстного класу "table-active" до клітинки таблиці.

<table class="table"> <tr> <td>Thomas</td> <td class="table-active">80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

Нижче таблиці є чотири клітинки, нанесені випадковим чином з різними кольорами фону.

Як створити таблиці Bootstrap 5?

Кольорові рядки та комірки з кольорами фону та контекстними класами

Нарешті, ви можете застосувати контекстний клас таблиці та контекстний клас фону в будь -якій комбінації, щоб створити різні кольори фону для рядків та комірок.

<table class="table"> <tr class="table-active"> <td>Thomas</td> <td class="table-info">80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td class="bg-success">79</td> </tr> <tr> </table>

Ось як буде виглядати таблиця -приклад із застосуванням різних кольорів для рядків та комірок.

Як створити таблиці Bootstrap 5?


Вивчити Bootstrap 5 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі