diff --git a/en/14.1.md b/en/14.1.md index 8d7d2258..c3e20f95 100644 --- a/en/14.1.md +++ b/en/14.1.md @@ -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 @@ -64,16 +64,16 @@ Next, we use the bootstrap into beego frame inside, quickly create a beautiful s // Picture files -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)