Как покрасить клетки с помощью Bootstrap? - PullRequest
Новая
       8

Как покрасить клетки с помощью Bootstrap?

0 голосов
/ 10 июня 2019

У меня есть приложение Flask, которое принимает от пользователей множество данных, обрабатывает их и генерирует таблицу / матрицу значений.

Я хочу отобразить эту таблицу пользователю с разными цветами для разных ячеек,Во время генерации таблицы я знаю, какого цвета должна быть ячейка.

Я использую Bootstrap4.Можно ли это сделать с помощью Bootstrap?Любые указатели в правильном направлении будут высоко оценены.

Ответы [ 3 ]

1 голос
/ 10 июня 2019

Атрибут class можно использовать в строке таблицы для получения требуемых цветов. 

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>ABC</td>
            <td>10</td>
        </tr>
        <tr class="danger">
            <td>DEF</td>
            <td>20</td>
        </tr>
        <tr class="info">
            <td>GHI</td>
            <td>30</td>
        </tr>
        <tr class="success">
            <td>JKL</td>
            <td>40</td>
        </tr>
        <tr class="warning">
            <td>MNO</td>
            <td>50</td>
        </tr>
    </tbody>
</table>
0 голосов
/ 10 июня 2019

Это способ добавить цвет в ячейки 

<!doctype html>
<html lang="en">

<head>

  <title>Table Color</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>


  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody class="table-hover">
        <tr>
          <td>Default</td>
          <td>Defaultson</td>
          <td>def@somemail.com</td>
        </tr>
        <tr class="table-primary">
          <td>Primary</td>
          <td>Joe</td>
          <td>joe@example.com</td>
        </tr>
        <tr class="table-success">
          <td>Success</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr class="table-danger">
          <td>Danger</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr class="table-info">
          <td>Info</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
        <tr class="table-warning">
          <td>Warning</td>
          <td>Refs</td>
          <td>bo@example.com</td>
        </tr>
        <tr class="table-active">
          <td>Active</td>
          <td>Activeson</td>
          <td>act@example.com</td>
        </tr>
        <tr class="table-secondary">
          <td>Secondary</td>
          <td>Secondson</td>
          <td>sec@example.com</td>
        </tr>
        <tr class="table-light">
          <td>Light</td>
          <td>Angie</td>
          <td>angie@example.com</td>
        </tr>
        <tr class="table-dark text-dark">
          <td>Dark</td>
          <td>Bo</td>
          <td>bo@example.com</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

Подробнее о таблице

таблица документации начальной загрузки 4

0 голосов
/ 10 июня 2019

В Bootstrap 4 можно придать цвет строкам таблицы, добавив bg классы к элементам <tr>, таким как; 

<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>

Взгляните на bootstrapдокументация таблиц , которая подробно объясняет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...