В моей голове есть следующие теги:
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="boot.js"></script>
Последний скрипт - это ссылка на другой файл, который я использую для выполнения всего кода jQuery. Однако код ниже:
<body> <nav class="navbar navbar-expand-md navbar-dark"> <nav class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </nav> </body>
Это просто отображает белую страницу. Однако, если я использую bootstrap cdn для JavaScript версии 3.4.1, это работает, но не так, как предполагалось (вероятно, потому что это более старая версия). Есть причина, почему это происходит?
Если вы хотите сохранить темный фон в панели навигации, добавьте еще класс bg-dark с <nav class="navbar navbar-expand-md navbar-dark bg-dark">
bg-dark
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
Я думаю, это будет работать. Пример дается удар:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <nav class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </nav> </body> </html>