Nano Hash - криптовалюты, майнинг, программирование

Bootstrap 4 с Django не отображается должным образом

Я пытаюсь настроить Django для работы с Bootstrap. Я не могу заставить его работать должным образом, и я не уверен, что я делаю неправильно. Для начала я просто показываю панель. Это должно выглядеть как этот пример из W3Schools.

Вместо этого это выглядит так: введите здесь описание изображения

Вот как выглядит мой сгенерированный HTML:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <h2>Basic Panel</h2>
        <div class="panel panel-default">
            <div class="panel-body">A Basic Panel</div>
        </div>
    </div>
</body>
</html>

Кажется, что какой-то стиль применяется, поскольку, если я удалю таблицу стилей <link>, стиль изменится. На сайте Bootstrap упоминается, что неполный стиль может быть связан с объявлением DOCTYPE, но, насколько я могу судить, я понял это правильно.

Я предполагаю, что совершаю здесь относительно очевидную ошибку.

python django html css bootstrap-4
07.09.2017

  • Да, у меня есть, и это работает. Но это не объясняет, почему мой не работает. Кроме того, я хочу использовать Bootstrap 4, а не 3. Я попробую возиться с аргументом целостности, но он скопирован прямо с сайта Bootstrap. 07.09.2017
  • Тоже не работает, выглядит точно также. Также удалены аргументы crossorigin. 07.09.2017

Ответы:


1

Проблема в вашем классе. Теперь начальная загрузка меняет некоторые классы. Посмотрите здесь для получения дополнительной информации https://v4-alpha.getbootstrap.com/migration/#panels-thumbnails-and-wells

07.09.2017
  • Круто, совсем пропустил это. Bootstrap было бы разумно привлечь немного больше внимания к этим изменениям на своем веб-сайте. Спасибо! 07.09.2017
  • Маурисио, я заметил, что на самом деле я не получаю того же заполнения, что и примеры начальной загрузки на эта страница. Вот пример. Есть ли очевидная вещь, которую я упускаю? 07.09.2017

    • 2

    Поэтому я поиграл с вашим кодом и примером w3schools. Кажется, что

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

    не красиво играет. Есть ли причина, по которой вы не хотите использовать

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

    Потому что, когда я заменил эту ссылку CSS, она отлично заработала в вашем коде. Надеюсь, это было полезно.

    Вот ваш код:

    <!DOCTYPE html>

<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
    <h2>Basic Panel</h2>
    <div class="panel panel-default">
        <div class="panel-body">A Basic Panel</div>
    </div>
</div>
</body>
</html>
    07.09.2017
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..