An example play application illustrating the use of Twitter Bootstrap 2.x with Play 2.x.
Key Points
Download and install Bootstrap to your project:
- Modify project/Build.scala to download webjars and bootstrap libraries (CSS and Javascript) into your project. Note that in order to support integration testing using HtmlUnit, the JQuery version is downgraded to 1.8.3.
Make Twitter Bootstrap files available within your application:
- Modify conf/routes with a routing for the webjars path.
- Modify app/views/main.scala.html header to load bootstrap.min.css, bootstrap.min.js, and jquery.min.js via the webjar assets directory.
Tweak the body element so that it doesn't display underneath the "fixed top" navbar used in this example:
- Modify public/stylesheets/main.css to add 50px of padding to the body element (if you are using Bootstrap navbar-fixed-top class).
If using forms, provide a new Play "helper" definition so that forms display correctly:
- Create app/views/helper/twitterBootstrapInput.scala.html "helper" which provides Bootstrap 2.0 style form element layout.
- In pages with forms, define your helper as the implicitFieldConstructor
Make the current page "active" in the navbar:
- Modify the main template to support the "active" page through a currentPage parameter.
- Pass the currentPage parameter to the main template on each page to tell it which navbar item to make active.
- (Note: in this example, all three navbar items go to the same page.)
Usage
Download the system, invoke play run from the top-level directory, then go to http://localhost:9000/ to see the system. It should look like the screen image at the top of this page.
Screencast
Click the image below to watch a 13 minute walkthrough of this example:
Note this screencast was made in May, 2013 so does not show later changes to this system.
Comments? Questions?
Please create a github issue.
Revision History
- May, 2013: Initial release for Play 2.1.0.
- July, 2013: Updated to Play 2.1.1. Enhanced to show how Bootstrap javascript libraries are loaded. Since HtmlUnit (used for integration testing) currently supports only JQuery 1.8.3, special webjar syntax is used in Build.scala to show how to load a recent version of Bootstrap with an older version of JQuery.