Блог

Главная - Вопросы по программированию - Библиотека Bootstrap CSS не загружается

Библиотека Bootstrap CSS не загружается

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

Играю с учебным пособием, которое включает введение в Bootstrap, и оно показывает мне, как взять ссылку с веб-сайта и добавить ее в файл, но тогда приведенный ниже код (div в теле) не будет отображаться так, как должен. Есть идеи, почему?

 <!DOCTYPE html>
<html lang ="en">
    <head>
        <title>Hello!</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
    <body>
        Hello, world!
        <div class="alert alert-success" role="alert">
            A simple success alert—check it out!
          </div>
    </body>
</html>

Комментарии:

1. 4.5.3 был опубликован буквально 6 часов назад, CDN еще не обновлен. Пока используйте 4.5.2 ( bootstrapcdn.com для получения инструкций.)

Ответ №1:

Попробуйте это

 <!DOCTYPE html>
<html lang ="en">
    <head>
        <title>Hello!</title>
     <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        Hello, world!
        <div class="alert alert-success" role="alert">
            A simple success alert—check it out!
          </div>
    </body>
</html>

и я советую вам использовать этот bootstrap-шаблон

    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Bootstrap-boilerplate</title>
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   </head>


   <body>
<!-- Optional JavaScript-->
<!-- JQuery first, then Popper.js  the Bootstrap JS-->
      <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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
   </body>
</html>

Комментарии:

1. Хороший, спасибо! Можете ли вы кратко объяснить, почему это необходимо добавить?

2. @gds2080 это бета-версия, плохая ссылка, не используйте ее.. проверьте здесь: bootstrapcdn.com для последней версии

Ответ №2:

для этого вам следует изменить ссылку ur:

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

Комментарии:

1. Это немного расплывчато. Можете ли вы быть более конкретным? Это лучший способ помочь OP проложить надежный путь вперед.