There are some components that are commonly used in web application, such as alert information, drop-down buttons, button groups, and modal dialogs. Bootstrap has a great support for that, and you can create those widgets in Opa. Let's first take a look at how we create a drop-down button in Opa:
import stdlib.themes.bootstrap.css
function page(){
<div class="btn-group" style="margin:10px">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">action1</a></li>
<li><a href="#">action2</a></li>
<li><a href="#">action3</a></li>
</ul>
</div>
}
Server.start(Server.http,[
{resources: @static_resource_directory("resources")},
{register: [{js: ["resources/bootstrap.min.js"]}] },
{title:"Opa Packt", ~page}
])