我正在编写我的第一个网络服务器，所以不要讨厌。
我在 BootStrap 中使用 Golang 和 HTML。
该程序最终将在小型设备中的 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 个文件，这非常好。
关于html - 使用本地版本时丢失 BootStrap 格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51548574/