Подключение скриптов и ссылок [в чем разница при использовании разных CDN?]

Добрый вечер! подскажите пожалуйста в чем разница между подключением ссылок stackpath и maxcdn, как я поняла у всех разный результат и разные классы и как тогда понять что к чему относится?

Буду очень благодарна!

Судя по названиям это разные провайдеры CDN. Не должно быть разнцы в наборе классов (если речь о CSS). Разница может быть только в скорости и доступности этих CDN в разных точках планеты. Те кто плотнее работает с этим вопросом может лучше рассказать о разнице в провайдерах. Желательно использовать одну и ту же CDN.

Я бы выбирал maxcdn только потому именно ее встречал чаще всего в исходниках.

1 лайк

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

Я понял мысль только частично. Главный вопрос - остались ли непонятки?

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Carousel W3</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
   -->

</head>

<body>

<div class="container">
  <h2>Carousel Example</h2>  
  <div id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner">
    
      <div class="item active">
        <img class="img-responsive center-block"  src="img/mountains.jpg" alt="Los Angeles" style="width:50%;">
      </div>
    
      <div class="item">
        <img class="img-responsive center-block"  src="img/nature.jpg" alt="Chicago" style="width:50%;">
      </div>
    
      <div class="item">
        <img class="img-responsive center-block"  src="img/waterfall.jpg" alt="New york" style="width:50%;">
      </div>
    </div>

    
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <!-- <span class="sr-only">Previous</span> -->
    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <!-- <span class="sr-only">Next</span> -->
    </a>
  </div>
</div>

</body>
</html>

следующий пример также не работает если поменять подключения
а также если в блоках div class=“carousel-item” убрать класс carousel, что привычно для maxcdn

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Carousel ID</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
   -->
</head>

<body>
  
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>


        <!-- Wrapper for slides -->
        <div class="carousel-inner">
        
            <div class="carousel-item active">

              <!-- display-block  и  width-100 -->
              <img class="d-block w-100  vh-100"  src="img/mountains.jpg">
            </div>
          
            <div class="carousel-item">
              <img class="d-block w-100  vh-100"  src="img/nature.jpg">
            </div>
          
            <div class="carousel-item">
              <img class="d-block w-100  vh-100"  src="img/waterfall.jpg">
            </div>

        </div>

        
        <a href="#myCarousel"  class="carousel-control-prev"  role="button"   data-slide="prev">
          <span class="carousel-control-prev-icon"  aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        

        <a href="#myCarousel"  class="carousel-control-next"  role="button"   data-slide="next">
          <span class="carousel-control-next-icon"  aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>

    </div>
  
</body>
</html>

еще не пойму почему не работает плавный просмотр слайдов

Это разные версии библиотек. Поэтому разные классы у подключаемых файлов. Цифры в урле имеют значение, тут подробнее написано какое Семантическое Версионирование 2.0.0 | Semantic Versioning


А это разные варианты библиотеки (слим и обычный) подробнее о разнице можно читать тут: What are the differences between normal and slim package of jquery? - Stack Overflow. Очень возможно что плагины не работают из-за отсутствующих функций в jquery-slim.

1 лайк

да, это был встречный вопрос - выходит от разных версий jquery - min, slim, light зависит результат? а как на счет bootstrap версий? с ними тоже самое?

Обычно разные мажорные версии (первое число из трех в последовательности x.x.x) имеют несовместимый набор api. Это значит что код, посмотренный на api версии 2 скорее всего несовместим с кодом, построенным на api версии 3.

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

я не поняла, те упрощенными версиями лучше не пользоваться?

Версии библиотеки типа 3.4.1 и варианты типа slim и full - это разные вещи. Я говорил о версиях. Почитай https://semver.org/lang/ru/ там тоже про версии, но другими более выверенными словами.

1 лайк

а я про варианты)

“Упрощенными”, “урезанными” версиями можно пользоваться только если понимаешь что делаешь. Обычно они не являются заменой полным версиям и несут с собой последствия которые нужно просчитать и принять/отвергнуть.

1 лайк

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

Да, верно

спасибо Дима