Bootstrap не работает в моем шаблоне - PullRequest
Новая
       21

Bootstrap не работает в моем шаблоне

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

Я пытаюсь добавить разборный раздел на моей странице с помощью начальной загрузки.Цель состоит в том, чтобы таблица объектов отображалась после нажатия кнопки.Однако на данный момент даже пример на сайте Bootstrap не работает.Проблемная часть выглядит следующим образом: 

<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>

Весь код выглядит следующим образом: 

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>
        $('#toggle').click(function() {
            $('form').toggle('slow');
        });
    </script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello world!</title>
</head>

<body>
    <h3 class="text-success">Add Sensor</h3>
    <br>

    <!--    <form style="display:none;" method="post">-->
    <form method="post">
        {% csrf_token %}
        <div class="row align-items-center">
            <div class="col-sm-8">
                <table>
                    {{ sensor_form.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>

                <br>
                <br>

                <p>
                    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    Link with href
                </a>
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                        Button with data-target
                    </button>
                </p>
                <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                    </div>
                </div>

                <br>
                <br>

                <h3 class="text-success">View Sensors</h3>

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Sensor ID</th>
                            <th scope="col">Sensor Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%for obj in sensors_list%}
                        <tr>
                            <td>{{obj.sensor_id}}</td>
                            <td>{{obj.sensor_name}}</td>
                            <!--                        <th scope="row">1</th>-->
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </form>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

</body>

</html>

Я знаю, что код может быть лучше выровнен, я планирую сделать это, как только эта версия заработает

Ответы [ 2 ]

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

Основная причина в том, что вы не добавили bootstrap.js в свой код, вот рабочий пример с правильным выравниванием ссылки и скрипта 

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <title>Hello world!</title>
</head>

<body>
  <h3 class="text-success">Add Sensor</h3>
  <br>

  <!--<form style="display:none;" method="post">-->
  <form method="post">
    {% csrf_token %}
    <div class="row align-items-center">
      <div class="col-sm-8">
        <table>
          {{ sensor_form.as_table}}
        </table>
        <div class="mx-sm-2">
          <input type="submit" value="Submit">
        </div>
        <br>
        <br>
        <p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                Link with href
            </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    Button with data-target
                </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </div>
        <br>
        <br>
        <h3 class="text-success">View Sensors</h3>
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Sensor ID</th>
              <th scope="col">Sensor Name</th>
            </tr>
          </thead>
          <tbody>
            {%for obj in sensors_list%}
            <tr>
              <td>{{obj.sensor_id}}</td>
              <td>{{obj.sensor_name}}</td>
              <!--<th scope="row">1</th>-->
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </form>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script>
    $('#toggle').click(function() {
      $('form').toggle('slow');
    });
  </script>

</body>

</html>
0 голосов
/ 11 июня 2019

Итак, из того, что я вижу, у вас есть кое-что неуместное, но после сравнения с документацией я могу предложить вам жизнеспособное решение.

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

<div class="card">
    <div class="card-header" id="headingThree">
         <h2 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTable" aria-expanded="false" aria-controls="collapseTable">
              Collapsible Group Item #3
            </button>
        </h2>
    </div>
    <div id="collapseTable" class="collapse" aria-labelledby="collapseTable">
      <div class="card-body">
        <h3 class="text-success">View Sensors</h3>

        <table class="table">
           <thead>
               <tr>
                   <th scope="col">Sensor ID</th>
                   <th scope="col">Sensor Name</th>
               </tr>
           </thead>
           <tbody>
                {%for obj in sensors_list%}
                <tr>
                    <td>{{obj.sensor_id}}</td>
                    <td>{{obj.sensor_name}}</td>
    <!--            <th scope="row">1</th>-->
                </tr>
             {% endfor %}
           </tbody>
         </table>
      </div>
    </div>
</div>
...