Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I'm using the 2.0.1 twitter bootstrap with Play 2.0. You can download a specific version here: <a href="https://github.com/twitter/bootstrap/tags">https://github.com/twitter/bootstrap/tags</a> . Once you download the twitter bootstrap you have two options:</p> <ul> <li><p>you can choose to just use the <code>bootstrap.min.css</code> (and <code>bootstrap-responsive.css</code>) and <code>bootstrap.min.js</code>, all these file can be placed in the public folder.</p></li> <li><p>or you can use the less files for the css. If you want to use the less files you make the following package (in the root of your app folder):</p> <p>assets.stylesheets.bootstrap</p></li> </ul> <p>And in you build scala you define that these .less files should be compiled:</p> <pre><code>// Only compile the bootstrap bootstrap.less file and any other *.less file in the stylesheets directory def customLessEntryPoints(base: File): PathFinder = ( (base / "app" / "assets" / "stylesheets" / "bootstrap" * "bootstrap.less") +++ (base / "app" / "assets" / "stylesheets" / "bootstrap" * "responsive.less") +++ (base / "app" / "assets" / "stylesheets" * "*.less") ) val main = PlayProject(appName, appVersion, appDependencies, mainLang = JAVA).settings( // Add your own project settings here lessEntryPoints &lt;&lt;= baseDirectory(customLessEntryPoints) ) </code></pre> <p>And then you can include it in your templats:</p> <pre><code>&lt;link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap/bootstrap.min.css")" /&gt; &lt;link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap/responsive.min.css")" /&gt; </code></pre> <p><strong>EDIT: 2012-09-17:</strong> If you plan to build Play from source, follow this tutorial the Play wiki page: <a href="https://github.com/playframework/Play20/wiki/Tips">https://github.com/playframework/Play20/wiki/Tips</a></p> <p><strong>EDIT: 2012-09-21:</strong> When using the bootstrap you always have to make a choice whether you would change the folder <code>images</code> or adding a route to the two static images used by the bootstrap:</p> <p><strong>EDIT: 2013-03-11:</strong> As xref pointed, I made a mistake: <code>img</code> must be <code>images</code>:</p> <pre><code>GET /assets/img/glyphicons-halflings-white.png controllers.Assets.at(path="/public", file="/images/glyphicons-halflings-white.png") GET /assets/img/glyphicons-halflings.png controllers.Assets.at(path="/public", file="/images/glyphicons-halflings.png") </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload