我创建了一个功能齐全的移动优先响应网站。在这一点上,我还没有使用来自像 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>
`