这篇文章中我们将会通过简单的实例介绍如何在go语言Web编程中使用BootStrap的方式
BootStrap
Bootstrap源于Twitter的一个机遇HTML/CSS/JS的前端开发框架，它由Twitter的Mark Otto和Jacob Thornton合作开发,简单灵活，使得 Web 开发更加快速便捷。
版本
目前BootStrap虽然推出了4.0.0,但是仍然是Alpha版。这篇文章中仍然使用稳定的BootStrap3.3.7版本。
项目版本BootStrap版本3.3.7下载地址https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
下载
使用如下步骤，下载和准备BootStrap
步骤详细Step 1wget https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zipStep 2unzip bootstrap-3.3.7-dist.zipStep 3cd bootstrap-3.3.7-dist/
例子代码
[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.HandleFunc("/", Hello)
http.ListenAndServe(":8080", nil)
}
[root@liumiaocn bootstrap-3.3.7-dist]#
BootStrap模板文件
例子中使用的bootstrap.min.css和bootstrap.min.js均使用了cdn进行引用。
[root@liumiaocn bootstrap-3.3.7-dist]# cat user.tpl
<html>
<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="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div>
<div>
<a href="#">Person general infor</a>
</div>
</div>
</nav>
<div>
<div>
<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>
<div>
<div>
<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>
<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>
<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>
<div>
<a href="#">Hello, {{.Name}}, Welcome to go programming...</a>
</div>
</div>
</nav>
</footer>
</div> <!-- /container -->
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
[root@liumiaocn bootstrap-3.3.7-dist]#
执行确认
[root@liumiaocn bootstrap-3.3.7-dist]# go run basic-web-bootstrap.go
结果画面
总结
本文使用BootStrap作为模板页面渲染，go语言提供Web框架和控制，可以看出仅仅需要非常少的动作即可开发。但是在实际的开发中目前还没有那么轻松，比如在例子中使用的bootstrap.min.css和bootstrap.min.js均使用了cdn进行引用，使用cdn不但非常简单，而且能够减轻网站IO的压力。但是使用cdn这个角度上来说，事前的准备比如下载BootStrap解压设定等操作均为无用之举，但是如果需要用go进行框架的设计又不需要或者不想使用reveal等Web框架，自行设计的时候这些在很多情况下都是绕不过去的问题，在后续的讨论中会继续延伸如何设计go的Web框架。
参考项目
项目名称URLgo-bootstraphttps://github.com/go-bootstrap/go-bootstrap
有疑问加站长微信联系（非本文作者）
