80 lines
3.6 KiB
Markdown
80 lines
3.6 KiB
Markdown
# 14.1 Static files
|
||
|
||
As we have already talked about how to deal with static files, this section we detail how to set up and use in beego static files inside. By then introduce a twitter open source html, css framework bootstrap, without a lot of design work we can let you quickly create a beautiful site.
|
||
|
||
## Beego static files and settings to achieve
|
||
|
||
Go's net/ http package provides a static file serving, `ServeFile` and `FileServer` other functions. beego static file processing is handled based on this layer, the specific implementation is as follows:
|
||
|
||
//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
|
||
}
|
||
}
|
||
|
||
StaticDir is stored inside the corresponding URL corresponds to a static file directory, so handle URL requests when the request need only determine whether the address corresponding to the beginning of the process contains static URL, if included on the use http.ServeFile provide services.
|
||
|
||
Examples are as follows:
|
||
|
||
beego.StaticDir["/asset"] = "/static"
|
||
|
||
Example. Then the request url `http://www.beego.me/asset/bootstrap.css` will request `/static/bootstrap.css` for the client.
|
||
|
||
## Bootstrap integration
|
||
|
||
Bootstrap is Twitter launched an open source toolkit for front-end development. For developers, Bootstrap is the rapid development of the best front-end Web application toolkit. It is a collection of CSS and HTML, it uses the latest HTML5 standard, to your Web development offers stylish typography, forms, buttons, tables, grids, systems, etc.
|
||
|
||
- Components
|
||
Bootstrap contains a wealth of Web components, according to these components, you can quickly build a beautiful, fully functional website. Which includes the following components:
|
||
Pull-down menus, buttons, groups, buttons drop-down menus, navigation, navigation bar, bread crumbs, pagination, layout, thumbnails, warning dialog, progress bars, and other media objects
|
||
- JavaScript plugin
|
||
Bootstrap comes with 13 jQuery plug-ins for the Bootstrap a component gives"life." Including:
|
||
Modal dialog, tab, scroll bars, pop-up box and so on.
|
||
- Customize your own framework code
|
||
Bootstrap in can modify all CSS variables, according to their own needs clipping code.
|
||
|
||
|
||
|
||
Figure 14.1 bootstrap site
|
||
|
||
Next, we use the bootstrap into beego frame inside, quickly create a beautiful site.
|
||
|
||
1. First to download the bootstrap directory into our project directory, named as static, as shown in the screenshot.
|
||
|
||
|
||
|
||
Figure 14.2 Project static file directory structure
|
||
|
||
2. Because beego default values set StaticDir, so if your static files directory is static, then you need not go any further:
|
||
|
||
StaticDir["/static"] = "static"
|
||
|
||
3. templates use the following address on it:
|
||
|
||
// css file
|
||
<link href="/static/css/bootstrap.css" rel="stylesheet">
|
||
|
||
// js file
|
||
<script src="/static/js/bootstrap-transition.js"></script>
|
||
|
||
// Picture files
|
||
<img src="/static/img/logo.png">
|
||
|
||
The above can be achieved to bootstrap into beego in the past, as demonstrated in Figure is the integration of the show came after renderings:
|
||
|
||
|
||
|
||
Figure 14.3 Construction site interface based bootstrap
|
||
|
||
These templates and formats bootstrap official has to offer will not be repeated here paste code, we can bootstrap on the official website to learn how to write templates.
|
||
|
||
## Links
|
||
|
||
- [Directory](preface.md)
|
||
- Previous section: [Develop web framework](14.0.md)
|
||
- Next section: [Session](14.2.md)
|