Question

我正在尝试使用Bootstrap的导航标签功能，但我似乎无法使其正常工作。

我在做什么（或不做什么）错了？

<!DOCTYPE html>
<html>
<head>
  <title>Luis Gonzalez's portfolio</title>
  <link rel="stylesheet" type="text/css" href="portstyle.css"/>
</head>
<body>
    <div class="header">
      <div class="navi">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">Creations</a></li>
          <li><a href="index.html">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
</body>
</html>

Answer 1

您需要引用bootstrap个文件。

现在你可以使用这些链接：

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

示例：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Luis Gonzalez's portfolio</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
  <link rel="stylesheet" type="text/css" href="portstyle.css"/>
</head>
<body>
    <div class="header">
      <div class="navi">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">Creations</a></li>
          <li><a href="index.html">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
</body>
</html>

＆＃13;

如果您想自己下载并托管Bootstrap，请转到getbootstrap.com，然后按照其中的说明操作。

如果您不想自己下载和托管Bootstrap，可以从CDN（内容分发网络）中添加MaxCDN。

CDN为Bootstrap's，CSS和JavaScript提供jQuery支持。虽然您还必须包含 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>：

bootstrap

旁注 - 确保您最后链接到自己的样式表，这意味着后您已链接到所有CSS文件。否则，您可能会遇到一些意外行为，如引导程序CSS覆盖您自己的{{1}}等。

Bootstrap选项卡功能不起作用

1 个答案: