新手使用Bootstrap官方入门模板出现导航栏及页面样式异常问题

核心错误点 #

• link标签rel属性拼写错误：你代码中写的是rel="stylesheets"，多了末尾的s，正确写法为rel="stylesheet"，该错误会导致浏览器无法识别并加载关联的样式文件。
• 缺失Bootstrap核心依赖：你当前仅引入了自定义的app.css，未引入Bootstrap的CSS、jQuery依赖以及Bootstrap JS文件，Bootstrap的所有预设样式和交互组件（比如折叠导航栏）都依赖这些核心文件才能正常运行。你代码中使用的navbar-default是Bootstrap 3的专属样式类，需要对应引入Bootstrap 3版本的资源。

修正后的代码示例 #

你可以提前将Bootstrap 3的CSS、JS文件以及jQuery库下载到本地项目的对应目录中，再按下方代码调整：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test theme</title>
  <!-- 引入本地Bootstrap3 CSS文件 -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Test theme</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#">About</a>
          </li>
          <li><a href="#">Contact</a>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
  <div class="container">
    <div class="starter-template">
      <h1>Bootstrap starter template</h1>
      <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
    </div>
  </div>
  <!-- /.container -->
  <!-- 引入本地jQuery文件，Bootstrap3依赖jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- 引入本地Bootstrap3 JS文件 -->
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

注意事项 #

• 确认代码中填写的资源路径和你本地项目的实际目录结构一致，避免路径错误导致资源加载失败。
• 如果你后续使用Bootstrap 4/5版本，navbar-default类已被废弃，需要替换为对应版本的导航栏样式类才能正常显示。

内容的提问来源于stack exchange，提问作者lc312