Bootstrap HTML, пытаясь сделать темный стол - PullRequest
Новая
       3

Bootstrap HTML, пытаясь сделать темный стол

0 голосов
/ 24 июня 2018

Итак, я смотрел на https://getbootstrap.com/docs/4.0/content/tables/ и увидел очень темный стол bg возле дна. Я взял код и поместил его в HTML-документ, он не работал. Я немного поигрался с кодом, все еще ничего.

Как бы я взял стол?

Помогите пожалуйста!

Код (с сайта): 

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

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

Ответы [ 2 ]

0 голосов
/ 24 июня 2018

Вы импортировали необходимые файлы в свои документы HTML?

Я только что попробовал код на моей стороне, и он работает отлично.

Ниже приведен мой вывод из сегмента кода, который вы дали:

Вывод, показанный на моем компьютере

Если выше, чтоВы искали, вы можете обратиться к приведенному ниже коду:

Не забудьте заглянуть внутрь своего тега thead, если вы собираетесь его использовать.Для получения дополнительной информации обратитесь к https://getbootstrap.com/docs/4.0/content/tables/#table-head-options

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

    <body>
        <table class="table table-dark">
            <tbody>
                <tr class="bg-primary">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr class="bg-success">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr class="bg-warning">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td class="bg-primary">1</td>
                    <td class="bg-success">2</td>
                    <td class="bg-warning">3</td>
                    <td class="bg-danger">4</td>
                </tr>
            </tbody>
        </table>
    </body>
0 голосов
/ 24 июня 2018

если вам нужно создать темную таблицу, вы можете использовать ее следующим образом: 

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

если по какой-то причине класс начальной загрузки не работает, я советую вам определить свой собственный класс в css: 

.table{
 background: #212529 !important;
  color: white !important;
}

HTML: 

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Я надеюсь помочь вам.Удачи

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

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

...