Importing Bootstrap

We have talked about how to import external files (JavaScript, CSS, among others) in the Resource handler section of Chapter 3, Developing Web Applications. We would have to import all the necessary Bootstrap files if we do that manually. To make it easy, Opa provides some shortcuts for using Bootstrap. Let's get started with an example:

import stdlib.themes.bootstrap
function page(){
  <button class="btn btn-primary"style="margin:5px">Click</button>
}
Server.start(Server.http,{title:"Opa Packt",~page})

All we need is an import statement, and Opa will handle the rest. The result of the above code looks as shown in the following screenshot. We can see that the Click button is rendered using the btn and the btn-primary class, which are provided by Bootstrap.

Actually, we can control the importing in more detail. By doing this, we can prevent loading unnecessary resources and only load what we need. Refer to the following import statements to do this:

// import bootstrap...