当前位置：首页 > 文章列表 > Golang > Go问答 > 在本地环境下无法加载 BootStrap 样式

在本地环境下无法加载 BootStrap 样式

来源：stackoverflow 2024-03-01 16:54:25 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《在本地环境下无法加载 BootStrap 样式》，以下内容主要包含等知识点，如果你正在学习或准备学习Golang，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

问题内容

我正在编写我的第一个网络服务器，所以不要讨厌。

我正在使用 golang 和 html 以及 bootstrap。

该程序最终将在小型设备中的 raspberry pi 上运行。所以我认为最好使用 bootstrap 的下载版本而不是 cdn 版本，对吗？

但是当我这样做时，页面上的按钮会失去格式。

这是我使用 cdn 版本的 html 代码：

<!doctype html>
<html lang="en">
<head>
  <title>cacophonator setup</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>cacophonator setup</h2>
  <div class="col-sm-12">
        <!-- <a href="\camerapositioning\" class="btn btn-primary" type="button">camera positioning</a> -->
    <button type="button" class="btn btn-primary" onclick="location.href='camera-positioning.html'">camera positioning</button>
  </div>
  <div class="col-sm-12">
        <button type="button" class="btn btn-primary" onclick="location.href='3g-connectivity.html'">3g connectivity</button>
  </div>        
  <div class="col-sm-12">
      <button type="button" class="btn btn-primary" onclick="location.href='api-server.html'">api server</button>
  </div>
  <div class="col-sm-12">
    <button type="button" class="btn btn-primary" onclick="location.href='network-interfaces.html'">network interfaces</button>
  </div>

  <div class="col-sm-12">
    <button type="button" class="btn btn-primary" onclick="location.href='disk-memory.html'">disk and memory status</button>
  </div>

</div>

<h4>{{.head}}<h4>

</body>
</html>

这是新的 html，但不起作用：

<!doctype html>
<html lang="en">
<head>
  <title>cacophonator setup</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href = "css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>cacophonator setup</h2>
  <div class="col-sm-12">
        <!-- <a href="\camerapositioning\" class="btn btn-primary" type="button">camera positioning</a> -->
    <button type="button" class="btn btn-primary" onclick="location.href='camera-positioning.html'">camera positioning</button>
  </div>
  <div class="col-sm-12">
        <button type="button" class="btn btn-primary" onclick="location.href='3g-connectivity.html'">3g connectivity</button>
  </div>        
  <div class="col-sm-12">
      <button type="button" class="btn btn-primary" onclick="location.href='api-server.html'">api server</button>
  </div>
  <div class="col-sm-12">
    <button type="button" class="btn btn-primary" onclick="location.href='network-interfaces.html'">network interfaces</button>
  </div>

  <div class="col-sm-12">
    <button type="button" class="btn btn-primary" onclick="location.href='disk-memory.html'">disk and memory status</button>
  </div>

</div>

我只更改了 2 行，以便我使用（或尝试）本地 bootstrap css 和 js。

我在 go 中这样称呼它：

http.handlefunc("/", managementinterface.indexhandler)
log.fatal(http.listenandserve(":8080", nil))

而 indexhandler 是这样的：

func indexhandler(w http.responsewriter, r *http.request) {

    t, _ := template.parsefiles("../html/index.html")
    t.execute(w, "")

}

最后一点：cdn版本是3.3.7，我下载的版本是4.1.1

如果我查看本地 bootstrap css 文件，我可以看到：

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

这是我想要的样式。感谢任何帮助，谢谢。

解决方案

事实证明这个开源项目的其他人回答了这个问题。

他们所做的是将所有静态 css 和 html 页面打包到 go 可执行文件中。他们使用一个名为 packr 的包来做到这一点：https://github.com/gobuffalo/packr

这是一个可以为您做到这一点的工具。

那么您只需部署 1 个文件，这真的很好。

您实际上是通过 go 代码提供 js 和 css 代码吗？如果没有，您的浏览器正在向 go http 服务器请求资源，但它不知道您在说什么（如果您查看浏览器中的开发人员控制台，它将向您显示对这些文件的请求的 404 响应.

您可能需要执行类似的操作（假设您的 css 和 js 位于名为 asset 的目录中）

cssFs := http.FileServer(http.Dir("/home/user/www/assets/css"))
http.Handle("/css", fs)
jsFs := http.FileServer(http.Dir("/home/user/www/assets/js"))
http.Handle("/js", fs)

更多信息请拨打http.FileServer

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《在本地环境下无法加载 BootStrap 样式》文章吧，也可关注golang学习网公众号了解相关技术文章。

版本声明

本文转载于：stackoverflow 如有侵犯，请联系study_golang@163.com删除