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 回答