Question

我希望我的网站有一个菜单，其中包含显示的标签在Twitter Bootstrap网站上。

我已在<style type="text/css"> .jp-jplayer video { display: none !important; } </style>文件夹中下载了jquery 1.11.2并放置了以下内容在头部：

js/

接下来获取Navs菜单，我复制并粘贴Bootstrap组件页面中的代码（我刚刚将文本更改为显示）

<link rel="stylesheet" href="css/bootstrap.css"> 

<!--- Google  fonts-->    

<!-- javascript libraries -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!--- personal styles should always be below bootstrap -->
<link rel="stylesheet" href="css/theme.css">

然而，导航看起来并不像我预期的那样，链接显示为弹出列表。

我做错了什么？如何才能显示Navs Tabs和Navs丸？

Answer 1

我猜您还没有正确链接CSS文件，请尝试最新版CDN链接，

＆＃13;

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

＆＃13;

<!--- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<!--- personal styles should always be below Bootstrap Core CSS -->
<!--<link rel="stylesheet" href="css/theme.css">-->

<!--- Google  fonts-->


<div class="row">
  <div class="col-md-12 site-menu">
    <ul id="myTab" class="nav nav-tabs">
      <li role="presentation" class="active"><a href="index.html">Home</a>
      </li>
      <li role="presentation"><a href="#">Projects</a>
      </li>
      <li role="presentation"><a href="#">About</a>
      </li>
    </ul>
  </div>


  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!--- Bootstrap Core JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

＆＃13;

html文件的大纲应如下所示：

<!DOCTYPE html>
<html>

<head>
  <!-- Bootstrap Core CSS-->
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <!-- Google Fonts -->
  <link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,700|Amatic+SC:400,700" rel="stylesheet">
  <!-- My Theme style -->
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <!--lots of html-->
  <!--lots of html-->
  <!--lots of html-->


  <!-- jQuery 2.0.2 -->
  <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
  <!-- Bootstrap Core JS -->
  <script src="js/bootstrap.min.js" type="text/javascript"></script>

  <script>
    <!-- some JS Function -->
  </script>
</body>

</html>

Bootstrap3导航无法正常显示

1 个答案: