我们在前面已经讲过如何处理静态文件，这小节我们详细的介绍如何在 beego 里面设置和使用静态文件。通过再介绍一个 twitter 开源的 html、css 框架 bootstrap，无需大量的设计工作就能够让你快速地建立一个漂亮的站点。
# beego 静态文件实现和设置
Go 的 net/http 包中提供了静态文件的服务，ServeFile 和 FileServer 等函数。beego 的静态文件处理就是基于这一层处理的，具体的实现如下所示：
// static file server
for prefix, staticDir := range StaticDir {
if strings.HasPrefix(r.URL.Path, prefix) {
file := staticDir + r.URL.Path[len(prefix):]
http.ServeFile(w, r, file)
w.started = true
return
}
}
2
3
4
5
6
7
8
9
StaticDir 里面保存的是相应的 url 对应到静态文件所在的目录，因此在处理 URL 请求的时候只需要判断对应的请求地址是否包含静态处理开头的 url，如果包含的话就采用 http.ServeFile 提供服务。
举例如下：
beego.StaticDir["/asset"] = "/static"
那么请求 url 如 http://www.beego.me/asset/bootstrap.css 就会请求 /static/bootstrap.css 来提供反馈给客户端。
# bootstrap 集成
Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包。对于开发者来说，Bootstrap 是快速开发 Web 应用程序的最佳前端工具包。它是一个 CSS 和 HTML 的集合，它使用了最新的 HTML5 标准，给你的 Web 开发提供了时尚的版式，表单，按钮，表格，网格系统等等。
- 组件 Bootstrap 中包含了丰富的 Web 组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件： 下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等
- Javascript 插件 Bootstrap 自带了 13 个 jQuery 插件，这些插件为 Bootstrap 中的组件赋予了“生命”。其中包括： 模式对话框、标签页、滚动条、弹出框等。
- 定制自己的框架代码 可以对 Bootstra p中所有的 CSS 变量进行修改，依据自己的需求裁剪代码。
图 14.1 bootstrap 站点
接下来我们利用 bootstrap 集成到 beego 框架里面来，快速的建立一个漂亮的站点。
首先把下载的 bootstrap 目录放到我们的项目目录，取名为 static，如下截图所示
图 14.2 项目中静态文件目录结构
因为 beego 默认设置了 StaticDir 的值，所以如果你的静态文件目录是 static 的话就无须再增加了：
StaticDir["/static"] = "static"
- 模板中使用如下的地址就可以了：
// css 文件
<link href="/static/css/bootstrap.css" rel="stylesheet">
// js 文件
<script src="/static/js/bootstrap-transition.js"></script>
// 图片文件
<img src="/statichttps://image-1302243118.cos.ap-beijing.myqcloud.com/public/img/logo.png">
2
3
4
5
6
7
8
上面可以实现把 bootstrap 集成到 beego 中来，如下展示的图就是集成进来之后的展现效果图：
图 14.3 构建的基于 bootstrap 的站点界面
这些模板和格式 bootstrap 官方都有提供，这边就不再重复贴代码，大家可以上 bootstrap 官方网站学习如何编写模板。