在前面关于如何在go中使用BootStrap的时候，css和javascript文件的引用我们使用了cdn。css和javascript可以绕过去不访问本地的静态文件，但是关于工程所需要用到静态文件时应该如何处理这个问题，在这篇文章中我们将通过使用本地BootStrap的css和javascript文件的方式来实现。
BootStrap
Bootstrap源于Twitter的一个机遇HTML/CSS/JS的前端开发框架，它由Twitter的Mark Otto和Jacob Thornton合作开发,简单灵活，使得 Web 开发更加快速便捷。
版本
| 项目 | 版本 |
|---|---|
| BootStrap版本 | 3.3.7 |
| 下载地址 | https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip |
下载
使用如下步骤，下载和准备BootStrap
| 步骤 | 详细 |
|---|---|
| Step 1 | wget https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip |
| Step 2 | unzip bootstrap-3.3.7-dist.zip |
| Step 3 | cd bootstrap-3.3.7-dist/ |
例子代码
需要使用http.Handle引入静态资源.
[root@liumiaocn bootstrap-3.3.7-dist]# cat basic-web-bootstrap.go
package main
import "fmt"
import "net/http"
import "html/template"
func Hello(response http.ResponseWriter, request *http.Request) {
type person struct {
Id int
Name string
Country string
}
liumiaocn := person{Id: 1001, Name: "liumiaocn", Country: "China"}
tmpl, err := template.ParseFiles("./user.tpl")
if err != nil {
fmt.Println("Error happened..")
}
tmpl.Execute(response, liumiaocn)
}
func main() {
http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("./css"))))
http.HandleFunc("/", Hello)
http.ListenAndServe(":8080", nil)
}
[root@liumiaocn bootstrap-3.3.7-dist]#- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
BootStrap模板文件
注意路径位置,比如css文件为：css/bootstrap.min.css
[root@liumiaocn bootstrap-3.3.7-dist]# cat user.tpl
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap Template Page for Go Web Programming</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Person general infor</a>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Hello, {{.Name}}</h1>
<ul>
<li>Name : {{.Name}}<p>
<li>Id : {{.Id}}<p>
<li>Country: {{.Country}}
</ul>
<p><a class="btn btn-primary btn-lg" href="#" role="button">More »</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Name</h2>
<p>Name has the value of : {{.Name}} </p>
<p><a class="btn btn-default" href="#" role="button">More »</a></p>
</div>
<div class="col-md-4">
<h2>Id</h2>
<p>Id has the value of : {{.Id}} </p>
<p><a class="btn btn-default" href="#" role="button">More »</a></p>
</div>
<div class="col-md-4">
<h2>Country</h2>
<p>Country has the value of : {{.Country}} </p>
<p><a class="btn btn-default" href="#" role="button">More »</a></p>
</div>
</div>
<hr>
<footer>
<nav class="navbar navbar-inverse ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Hello, {{.Name}}, Welcome to go programming...</a>
</div>
</div>
</nav>
</footer>
</div> <!-- /container -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
[root@liumiaocn bootstrap-3.3.7-dist]#- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
执行确认
[root@liumiaocn bootstrap-3.3.7-dist]# go run basic-web-bootstrap.go- 1
结果画面
总结
通过http.Handle(“/css/”, http.StripPrefix(“/css/”, http.FileServer(http.Dir(“./css”))))的方式引入静态css文件，结合相对路径的写法，保证了静态文件也能够正常地被使用。
参考项目
| 项目名称 | URL |
|---|---|
| go-bootstrap | https://github.com/go-bootstrap/go-bootstrap |
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow