lostecho/build-web-application-with-golang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix section "Bootstrap integration" in 14.1.md

Browse Source
This commit is contained in:
Anchor
2015-02-08 21:10:53 -08:00
committed by James Miranda
parent 9b0a24adaf
commit 9735779a43
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
en/14.1.md
View File

@@ -26,34 +26,34 @@ Then, a request with a URL such as `http://www.beego.me/asset/bootstrap.css` wil
## 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.
Bootstrap is a Twitter launched open source Toolkit for front-end development. For developers, Bootstrap is one of the best front end kits for rapid Web application development. It is a collection of HTML, CSS and javascript components, using the latest HTML5 standards. These include a responsive grid, forms, buttons, tables, and many other useful things.
- 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.
Bootstrap contains a wealth of Web components. Using these components, you can quickly build a beautiful, fully functional website. Which includes the following components:
Pull-down menus, button groups, button drop-down menus, navigation, navigation bars, bread crumbs, pagination, layout, thumbnails, warning dialogs, progress bars, and other media objects
- JavaScript plugins
Bootstrap comes with 13 jQuery plug-ins for Bootstrap components, which gives them "life". These include:
Modal dialogs, tabs, scroll bars, pop-up boxes and so on.
- Bootstrap framework customization
All Bootstrap css variables can be modified according to your needs
![](images/14.1.bootstrap.png?raw=true)
Figure 14.1 bootstrap site
Figure 14.1 a bootstrap website
Next, we use the bootstrap into beego frame inside, quickly create a beautiful site.
Next, let's see how we can use Bootstrap inside our Beego application to quickly create a beautiful website:
1. First to download the bootstrap directory into our project directory, named as static, as shown in the screenshot.
1. First, let's download the bootstrap directory into our project's static directory, as shown in the following screenshot:
![](images/14.1.bootstrap2.png?raw=true)
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:
2. Because Beego sets a default value for `StaticDir`, 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:
3. Our templates use the following asset paths:
// css file
<link href="/static/css/bootstrap.css" rel="stylesheet">
@@ -64,16 +64,16 @@ Next, we use the bootstrap into beego frame inside, quickly create a beautiful s
// 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:
With the above code, we are integrating Bootstrap into our Beego application. The figure below demonstrates the rendered page:
![](images/14.1.bootstrap3.png?raw=true)
Figure 14.3 Construction site interface based bootstrap
Figure 14.3 website integrated with 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.
These templates and formats are come shipped with Bootstrap so we won't repeat the complete code here, however you can take a look at the project's official page to learn how to write your own templates.
## Links
- [Directory](preface.md)
- Previous section: [Develop web framework](14.0.md)
- Next section: [Session](14.2.md)
- Previous section: [Developing a web framework](14.0.md)
- Next section: [Sessions](14.2.md)