0

我创建了一个功能齐全的移动优先响应网站。在这一点上，我还没有使用来自像 Bootstrap 这样的网站的任何框架。我对 jquery 知之甚少，但我正在尝试实现 Bootstrap 提供的类似折叠菜单。我有一个三栏菜单图标，所以我假设我需要一个切换功能来折叠徽标下方的菜单。我正在创建的网站重量很轻，我不想添加巨大的引导响应 css 文件，也不想使用我已经制定的一些命名约定。是否可以仅从引导程序中获取折叠插件并将其调整为我的 css，如果可能，我应该执行哪些步骤？如果有人有知识或任何其他教程，我可以找到以另一种方式创建它的方法，将不胜感激。谢谢你。

下面是我的 html 设置。我不知道这是否有助于了解我是否需要添加 css 才能使折叠 jquery 工作。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>


<body>
    <section class="grid sticky">
        <div class="container"> 
            <header class="grid twelve header">
                <a class="menuButton not-desktop not-tablet" data-toggle="collapse" data-target=".nav-collapse">
                    <div class="iconBar"></div>
                    <div class="iconBar"></div>
                    <div class="iconBar"></div>
                </a>
                <div class="logoHolder">
                    <a class="logo" href="index.html">
                        <img src="img/logo/ks_logo.svg"> 
                    </a>
                </div>
                <!-- Main Nav, hidden below 768 px -->
                <nav class="mainNav  not-phone not-phoneSM">
                    <ul class="nav">
                        <li><a href="work.html">Work</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </header>
        </div>  
    </section>
<!-- Mobile Main Nav, called upon to relieve when screen is at 768 px -->
    <section class="not-desktop not-tablet">
            <header>
                <nav class="mobileMainNav nav-collapse collapse">
                    <ul>
                        <li><a href="work.html">Work</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </header>
    </section>

`

4

1 回答 1

0

那么你所指的部分是

<div class="navbar">
 <div class="navbar-inner">
  <div class="container">

  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>

  <!-- Be sure to leave the brand out there if you want it shown -->
  <a class="brand" href="#">Project name</a>

  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
   </div>
  </div>
 </div>
</div>

你总是可以下载 bootstrap css 和 bootstrap js，修改 css 然后缩小，怀疑它会影响你的性能。或者您可以提取您需要的部分并将其合并到您自己的设计中。在没有看到您的标记或响应式 css 的情况下，您已经实施了一种难以提供进一步建议的方法

于 2013-02-22T15:02:20.747 回答