Jquery 无法使用波旁威士忌重新加注
我正在尝试使用重新填充波旁威士忌来使用他们的css库。据我所知,我所要做的就是复制和粘贴他们的css和html,它应该可以工作。但是css在我试用的时候没有效果 我已经将链接添加到css文件中,并添加了jquery链接,但仍然不起作用。据我所知,ruby在使用填充物时是不必要的。如果我遗漏了任何步骤,请提供建议,谢谢 HTML文件Jquery 无法使用波旁威士忌重新加注,jquery,html,css,sass,bourbon,Jquery,Html,Css,Sass,Bourbon,我正在尝试使用重新填充波旁威士忌来使用他们的css库。据我所知,我所要做的就是复制和粘贴他们的css和html,它应该可以工作。但是css在我试用的时候没有效果 我已经将链接添加到css文件中,并添加了jquery链接,但仍然不起作用。据我所知,ruby在使用填充物时是不必要的。如果我遗漏了任何步骤,请提供建议,谢谢 HTML文件 <!DOCTYPE HTML> <html> <head> <title></title
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<header class="navigation">
<div class="menu-wrapper">
<a href="javascript:void(0)" class="logo">
<img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
</a>
<p class="navigation-menu-button" id="js-mobile-menu">MENU</p>
<div class="nav">
<ul id="navigation-menu">
<li class="nav-link"><a href="javascript:void(0)">Products</a></li>
<li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
<li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
<li class="nav-link more"><a href="javascript:void(0)">More</a>
<ul class="submenu">
<li><a href="javascript:void(0)">Submenu Item</a></li>
<li><a href="javascript:void(0)">Another Item</a></li>
</ul>
</li>
</ul>
</div>
<div class="navigation-tools">
<div class="search-bar">
<div class="search-and-submit">
<input type="search" placeholder="Enter Search" />
<button type="submit">
<img src="https://raw.githubusercontent.com/Magnus-G/Random/master/search-icon.png" alt="">
</button>
</div>
</div>
<a href="javascript:void(0)" class="sign-up">Sign Up</a>
</div>
</div>
</header>
<script>
$(function() {
var menu = $('#navigation-menu');
var menuToggle = $('#js-mobile-menu');
var signUp = $('.sign-up');
$(menuToggle).on('click', function(e) {
e.preventDefault();
menu.slideToggle(function(){
if(menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
// underline under the active nav item
$(".nav .nav-link").click(function() {
$(".nav .nav-link").each(function() {
$(this).removeClass("active-nav-item");
});
$(this).addClass("active-nav-item");
$(".nav .more").removeClass("active-nav-item");
});
});
</script>
</body>
</html>
您给出的示例CSS实际上是*S*CSS
Bourbon/Neat/Refills是SASS/SCSS库的集合。因此,bourbon网站上给出的示例是用SCS而不是CSS编写的。您可以使用预编译器(例如随附的预编译器)根据您给出的示例生成CSS,然后您可以在html中链接到该CSS。您必须取消_base.scss中的第10行注释,使用neat时默认不包括_grid-settings。还要检查第1行的_grid-settings.scss文件导入 这对我有用 什么对我有用(元视口) 老兄,我花了好几个小时才找到这个
<meta name="viewport" content="width=device-width, initial-scale=1.0">
请按照此处的完整说明进行操作:我看不出您的Sass中包含了波旁威士忌。为什么不包含一个较小的可编译Sass片段呢。你不需要向我们展示HTML,除非这是问题所在。你打算复制/粘贴多少次作为答案?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
sass --watch input.scss:output.css