我已经创建了一个功能齐全的移动的第一响应网站。在这一点上，我还没有使用任何框架从网站，如Bootstrap。我有很少的jquery知识，但正在尝试实现一个类似的折叠菜单，Bootstrap提供。我有一个三栏菜单图标，所以我假设我需要一个切换功能，折叠菜单下的标志。我正在创建的网站是非常轻的重量，我不'我不想添加一个巨大的bootstrap响应的css文件，也不想用我已经有的一些命名约定来处理它。有没有可能从bootstrap中只取一个collapse插件，并将其应用到我的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>`
1条答案
按热度按时间qcbq4gxm1#
你指的那一部分是
你可以下载bootstrap css和bootstrap js，修改css，然后缩小，怀疑它会不会对你的性能造成太大的影响。或者你可以提取你需要的部分，并将其合并到你自己的设计中。没有看到你的标记或你已经实现的响应css，很难提出任何进一步的建议。