Add Bootstrap to a Beego Project
Learn to structure the view templates and integrate Bootstrap into an existing Beego project.
We'll cover the following...
Before we add bootstrap to the project we need to do a little restructuring of the view code.
Here is the current notes application:
appname = beego_notes httpport = 8080 runmode = dev mysqlDataSource = "beego_notes:tmp_pwd@tcp(127.0.0.1:3306)/beego_notes?charset=utf8"
Restructuring the view code
In the existing code, each view in the /views/notes directory is a complete HTML template itself. If we add Bootstrap to this project, we will have to add Bootstrap CSS and JavaScript to each view template. Here is an example of one of the files /views/notes/index.tpl with Bootstrap integrated. We add the head tag in lines 3–11. The head tag includes the definition of Bootstrap stylesheets and JavaScript.
<!DOCTYPE html><html><head><!-- ... other meta tags and title ... --><!-- Include Bootstrap CSS locally --><link href="/static/css/bootstrap.min.css" rel="stylesheet"><!-- Include Bootstrap JavaScript locally (optional) --><script src="/static/js/bootstrap.min.js"></script></head><body><h2>All notes</h2><dl>{{ range $index, $note := .notes }}<dt><a href="/notes/{{ $note.Id }}">{{ $note.Name }}</a></dt><dd>- {{ $note.Content }}</dd>{{ end }}</dl><a href="/notes/new">New Note</a></body></html>
Similarly, we will have to add this head tag in all view templates to use Bootstrap. This is why we will restructure the views to have a set of layout files that will define the head of the HTML file.