1

我创建了 2 个文件夹：

  • bootstrap（最后一个版本，我保持不变）

  • 风俗：

  • 自定义变量.less（空）

  • 自定义-other.less（空）
  • custom-bootstrap.less( 我在其中放置了以下内容：

@import "../bootstrap/less/bootstrap.less"; @import "custom-variables.less"; @import "custom-other.less"; @import "../bootstrap/less/utilities.less";

然后我去bootswatch，选择主题Flatly并将variables.less的内容复制到我的custom-variables.less，将bootswatch.less的内容复制到我的custom-other.less。

然后我做

lessc custom-bootstrap.less > custom-bootstrap.css

我应该如何修改 index.html 以使模板工作？

`<head>
<title>Bootswatch: Flatly</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="./bootstrap.css" media="screen">
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../assets/css/bootswatch.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../bower_components/bootstrap/assets/js/html5shiv.js"></script>
  <script src="../bower_components/bootstrap/assets/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">

 var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23019901-1']);
  _gaq.push(['_setDomainName', "bootswatch.com"]);
    _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script>

`

（我一直试图在这里以不同的方式插入我的“custom-bootstrap.css”，但是在监听端口 8080 时，只显示纯文本）

我尝试了什么：

<link rel="stylesheet" href="./less/custom-bootstrap.css" media="screen">

<link rel="stylesheet" href="less/custom-bootstrap.css" media="screen">

<link rel="stylesheet" href="/less/custom-bootstrap.css" media="screen">

<link rel="stylesheet" href="/less/custom-bootstrap.css" media="screen" />

还

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/custom-bootstrap.css">

也试过

在 Chrome 和 Mozilla 中，

也试过

直接在浏览器中访问 c​​ss 文件 - 没办法。

控制台显示错误 404，也找不到其他一些 JS 文件。

请帮忙或投票）

4

2 回答 2

0

您应该包含您自定义的引导 css 文件，而不是原始文件。如果你只使用 bootswatch 中的 variables.less，那么你也不需要包含它。所以只需使用：

<link href="assets/css/custom-bootstrap.css" rel="stylesheet">

如果没有帮助，请提供我的文件以提供更多帮助。

PS：你让我在我在 CodeProject 的文章中看到这个问题。;)

于 2013-09-20T12:03:32.793 回答
0

您的 CSS 参考应如下所示：

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
于 2013-09-19T14:56:10.793 回答