jquery - 使用 Twitter Bootstrap 实现简单的响应式菜单

标签 jquery css twitter-bootstrap

我正在使用 Bootstrap 创建一个简单的响应式导航菜单,我已经遵循了一些教程,但是当我预览我的页面时,设计完全不同并且设计不是响应式的。谁能帮忙? 到目前为止,我的代码看起来像这样:

<head>
<meta charset="utf-8">
<title>Sara Cook</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio of my work">
<meta name="author" content="Sara Cook">

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
</head>

<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span>
</a>
    <a href="#" class="brand">Sara Cook</a>
    <div class="nav-collapse colapse">
    <ul class="nav pull-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
  </div>
  </div>
  </div>
 </div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

</body>

最佳答案

不要同时使用,只使用其中一个,

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

已编辑

我相信您正在使用 Bootstrap 3,所以请尝试下面的代码,请参阅 fiddle还有

<div class="navbar navbar-fixed-top navbar-default">
    <div class="navbar-header"><a href="#" class="navbar-brand">Sara Cook</a><a class="navbar-toggle"
        data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-th-list"></span>
</a>
    </div>
    <div class="container">
        <div class="navbar-collapse colapse">
            <ul class="nav pull-right navbar-nav">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Portfolio</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

关于jquery - 使用 Twitter Bootstrap 实现简单的响应式菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19837053/

相关文章:

jquery - 如何替换 Canvas 图像?

javascript - 如何使用 Jquery 数据表插件隐藏表中的列?

悬停的 CSS 深层元素

javascript - 如何打开一个 div 从 jQuery 的下拉列表中选择一个值

html - 使 DIV 随内容展开而不是滚动

javascript - 使用 JQuery,如何区分同一元素上的一次点击和下一次点击?

javascript - 强制下拉

javascript - 在现有的 HTML CSS 网站中使用 Vue.js 时,div 的排列不符合预期

css - Twitter Bootstrap 轮播 - 移动指示器

jquery - 更改弹出按钮图标