Build 2.1.0-j2-wip

This commit is contained in:
Arnold Daniels
2012-09-27 15:19:58 +02:00
parent aa6fc5043c
commit 9e82eba470
26 changed files with 4615 additions and 25 deletions

View File

@@ -76,6 +76,7 @@
<h1>Base CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
</div>
<img class="extended-badge" src="assets/img/extended-by-jasny.png">
</header>
@@ -91,8 +92,10 @@
<li><a href="#tables"><i class="icon-chevron-right"></i> Tables</a></li>
<li><a href="#forms"><i class="icon-chevron-right"></i> Forms</a></li>
<li><a href="#buttons"><i class="icon-chevron-right"></i> Buttons</a></li>
<li><a href="#action-links"><i class="icon-chevron-right"></i> Action links</a></li>
<li><a href="#images"><i class="icon-chevron-right"></i> Images</a></li>
<li><a href="#icons"><i class="icon-chevron-right"></i> Icons by Glyphicons</a></li>
<li><a href="#iconic"><i class="icon-chevron-right"></i> Iconic icons</a></li>
</ul>
</div>
<div class="span9">
@@ -1284,15 +1287,107 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;input class="span1" type="text" placeholder=".span1"&gt;
&lt;/div&gt;
...
</pre>
<h3>Small labels</h3>
<p>If you have a lot of fields in a form, you might want to use three or four columns. However labels can start taking up to much space. Simple add <code>.small-labels</code> to a horizontal form (or section within a form) to solve this.</p>
<form class="form-horizontal small-labels bs-docs-example">
<div class="row">
<div class="span2">
<div class="control-group">
<label class="control-label" for="small-1">Input 1</label>
<div class="controls">
<input class="span1" id="small-1" type="number">
</div>
</div>
<div class="control-group">
<label class="control-label" for="small-2">Input 2</label>
<div class="controls">
<input class="span1" id="small-2" type="number">
</div>
</div>
</div>
<div class="span2">
<div class="control-group">
<label class="control-label" for="small-3">Input 3</label>
<div class="controls">
<input class="span1" id="small-3" type="number">
</div>
</div>
<div class="control-group">
<label class="control-label" for="small-4">Input 4</label>
<div class="controls">
<input class="span1" id="small-4" type="number">
</div>
</div>
</div>
<div class="span2">
<div class="control-group">
<label class="control-label" for="small-5">Input 5</label>
<div class="controls">
<input class="span1" id="small-5" type="number">
</div>
</div>
<div class="control-group">
<label class="control-label" for="small-6">Input 6</label>
<div class="controls">
<input class="span1" id="small-6" type="number">
</div>
</div>
</div>
<div class="span2">
<div class="control-group">
<label class="control-label" for="small-7">Input 7</label>
<div class="controls">
<input class="span1" id="small-7" type="number">
</div>
</div>
<div class="control-group">
<label class="control-label" for="small-8">Input 8</label>
<div class="controls">
<input class="span1" id="small-8" type="number">
</div>
</div>
</div>
</div>
</form>
<pre class="prettyprint linenums">
&lt;form class="form-horizontal small-labels"&gt;
&lt;/div&gt;
</pre>
<h3>Uneditable inputs</h3>
<p>Present data in a form that's not editable without using actual form markup.</p>
<form class="bs-docs-example">
<span class="input-xlarge uneditable-input">Some value here</span>
<div class="input-xlarge uneditable-textarea" rows="3">
Some text here
on multiple lines
</div>
</form>
<pre class="prettyprint linenums">
&lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;
&lt;div class="input-xlarge uneditable-textarea" rows="3"&gt;
Some text here
on multiple lines
&lt;/div&gt;
</pre>
<h3>Editor textarea</h3>
<p>Add <code>.editor</code> to any textarea or <code>.uneditable-textarea</code> to create a larger field for content editing.</p>
<p>Also add <code>.editor-html</code>, if the textarea will be replaced by e.g. CKEditor or TinyMCE.</p>
<form class="bs-docs-example">
<textarea class="editor">
Some text here
on multiple lines
</textarea>
</form>
<pre class="prettyprint linenums">
&lt;textarea class="editor"&gt;
Some text here
on multiple lines
&lt;/textarea&gt;
</pre>
<h3>Form actions</h3>
@@ -1572,6 +1667,91 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</section>
<!-- Action links
================================================== -->
<section id="action-links">
<div class="page-header">
<h1>Action links</h1>
</div>
<h2>Alternative style for actions</h2>
<p>Sometimes a button will pull to much attention to an action. In those cases, you can use action links instead.</p>
<p>Action links can be used just like buttons, simply use <code>.act</code> instead.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Action link</th>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="act" href="#">Default</a></td>
<td><code>.act</code></td>
<td>Standard gray text</td>
</tr>
<tr>
<td><a class="act act-primary" href="#">Primary</a></td>
<td><code>.act-primary</code></td>
<td>Provides extra visual weight</td>
</tr>
<tr>
<td><a class="act act-info" href="#">Info</a></td>
<td><code>.act-info</code></td>
<td>Used as an alternate to the default styles</td>
</tr>
<tr>
<td><a class="act act-success" href="#">Success</a></td>
<td><code>.act-success</code></td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td><a class="act act-warning" href="#">Warning</a></td>
<td><code>.act-warning</code></td>
<td>Indicates caution should be taken with this action</td>
</tr>
<tr>
<td><a class="act act-danger" href="#">Danger</a></td>
<td><code>.act-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
<div class="bs-docs-example">
<div class="form-actions">
<button class="btn btn-primary" type="submit">Save changes</button>
<button class="btn" type="reset">Cancel</button>
<a href="#" class="act act-danger pull-right">Delete account</a>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="form-actions"&gt;
&lt;button class="btn btn-primary" type="submit"&gt;Save changes&lt;/button&gt;
&lt;button class="btn" type="reset"&gt;Cancel&lt;/button&gt;
&lt;a href="#" class="act act-danger pull-right"&gt;Delete account&lt;/a&gt;
&lt;/div&gt;
</pre>
<h2>Disabled state</h2>
<p>For disabled action links, use <code>.disabled</code> for links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.</p>
<div class="bs-docs-example">
<div class="form-actions">
<button class="btn btn-primary" type="submit">Save changes</button>
<button class="btn" type="reset">Cancel</button>
<button class="act pull-right" disabled="disabled">Disabled action</button>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="form-actions"&gt;
&lt;button class="btn btn-primary" type="submit"&gt;Save changes&lt;/button&gt;
&lt;button class="btn" type="reset"&gt;Cancel&lt;/button&gt;
&lt;button class="act act-danger pull-right" disabled="disabled"&gt;Disabled action&lt;/button&gt;
&lt;/div&gt;
</pre>
</section>
<!-- Images
@@ -1592,8 +1772,25 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;img src="..." class="img-circle"&gt;
&lt;img src="..." class="img-polaroid"&gt;
</pre>
<<<<<<< HEAD
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE7-8 due to lack of <code>border-radius</code> support.</p>
=======
<p>As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>
</div>
</div>
>>>>>>> Documented file upload + upload button
<div class="row">
<div class="span4">
<h3>Upload button</h3>
<p>It's possible to use a button to upload files, instead of showing the native browser element.</p>
<span class="btn btn-file">Upload a file<input type="file" /></span>
<p>There is also an interactive file and image upload widgets available. View <a href="./javascript.html#fileupload">the Javascript docs</a> for that.</p>
</div>
</div>
<br>
</section>
</section>
@@ -1890,6 +2087,210 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<section id="iconic">
<div class="page-header">
<h1>Iconic icons <small>Graciously provided by <a href="http://somerandomdude.com/work/iconic/" target="_blank">P.J. Onori</a></small></h1>
</div>
<h2>Icons as a font</h2>
<p>171 very cool icons as a font. The icons they can be any color you like, have the same size as your text and are subject to CSS text effects.</p>
<ul class="the-icons clearfix">
<li><i class="iconic-hash"></i> iconic-hash</li>
<li><i class="iconic-question-mark"></i> iconic-question-mark</li>
<li><i class="iconic-at"></i> iconic-at</li>
<li><i class="iconic-pilcrow"></i> iconic-pilcrow</li>
<li><i class="iconic-info"></i> iconic-info</li>
<li><i class="iconic-home"></i> iconic-home</li>
<li><i class="iconic-sun"></i> iconic-sun</li>
<li><i class="iconic-sun-stroke"></i> iconic-sun-stroke</li>
<li><i class="iconic-cloud"></i> iconic-cloud</li>
<li><i class="iconic-rain"></i> iconic-rain</li>
<li><i class="iconic-umbrella"></i> iconic-umbrella</li>
<li><i class="iconic-bolt"></i> iconic-bolt</li>
<li><i class="iconic-star"></i> iconic-star</li>
<li><i class="iconic-moon"></i> iconic-moon</li>
<li><i class="iconic-moon-stroke"></i> iconic-moon-stroke</li>
<li><i class="iconic-heart"></i> iconic-heart</li>
<li><i class="iconic-heart-stroke"></i> iconic-heart-stroke</li>
<li><i class="iconic-trash"></i> iconic-trash</li>
<li><i class="iconic-trash-stroke"></i> iconic-trash-stroke</li>
<li><i class="iconic-link"></i> iconic-link</li>
<li><i class="iconic-mail"></i> iconic-mail</li>
<li><i class="iconic-fork"></i> iconic-fork</li>
<li><i class="iconic-cog"></i> iconic-cog</li>
<li><i class="iconic-wrench"></i> iconic-wrench</li>
<li><i class="iconic-clock"></i> iconic-clock</li>
<li><i class="iconic-compass"></i> iconic-compass</li>
<li><i class="iconic-dial"></i> iconic-dial</li>
<li><i class="iconic-lightbulb"></i> iconic-lightbulb</li>
<li><i class="iconic-box"></i> iconic-box</li>
<li><i class="iconic-award"></i> iconic-award</li>
<li><i class="iconic-award-stroke"></i> iconic-award-stroke</li>
<li><i class="iconic-left-quote"></i> iconic-left-quote</li>
<li><i class="iconic-right-quote"></i> iconic-right-quote</li>
<li><i class="iconic-left-quote-alt"></i> iconic-left-quote-alt</li>
<li><i class="iconic-right-quote-alt"></i> iconic-right-quote-alt</li>
<li><i class="iconic-x"></i> iconic-x</li>
<li><i class="iconic-check"></i> iconic-check</li>
<li><i class="iconic-plus"></i> iconic-plus</li>
<li><i class="iconic-minus"></i> iconic-minus</li>
<li><i class="iconic-o-x"></i> iconic-o-x</li>
<li><i class="iconic-o-check"></i> iconic-o-check</li>
<li><i class="iconic-o-plus"></i> iconic-o-plus</li>
<li><i class="iconic-o-minus"></i> iconic-o-minus</li>
<li><i class="iconic-user"></i> iconic-user</li>
<li><i class="iconic-chat"></i> iconic-chat</li>
<li><i class="iconic-chat-alt"></i> iconic-chat-alt</li>
<li><i class="iconic-chat-alt-stroke"></i> iconic-chat-alt-stroke</li>
<li><i class="iconic-comment"></i> iconic-comment</li>
<li><i class="iconic-comment-stroke"></i> iconic-comment-stroke</li>
<li><i class="iconic-comment-alt1"></i> iconic-comment-alt1</li>
<li><i class="iconic-comment-alt1-stroke"></i> iconic-comment-alt1-stroke</li>
<li><i class="iconic-comment-alt2"></i> iconic-comment-alt2</li>
<li><i class="iconic-comment-alt2-stroke"></i> iconic-comment-alt2-stroke</li>
<li><i class="iconic-image"></i> iconic-image</li>
<li><i class="iconic-chart"></i> iconic-chart</li>
<li><i class="iconic-chart-alt"></i> iconic-chart-alt</li>
<li><i class="iconic-aperture"></i> iconic-aperture</li>
<li><i class="iconic-aperture-alt"></i> iconic-aperture-alt</li>
<li><i class="iconic-cursor"></i> iconic-cursor</li>
<li><i class="iconic-denied"></i> iconic-denied</li>
<li><i class="iconic-eye"></i> iconic-eye</li>
<li><i class="iconic-magnifying-glass"></i> iconic-magnifying-glass</li>
<li><i class="iconic-pen"></i> iconic-pen</li>
<li><i class="iconic-pen-alt"></i> iconic-pen-alt</li>
<li><i class="iconic-pen-alt-stroke"></i> iconic-pen-alt-stroke</li>
<li><i class="iconic-pen-alt2"></i> iconic-pen-alt2</li>
<li><i class="iconic-brush"></i> iconic-brush</li>
<li><i class="iconic-brush-alt"></i> iconic-brush-alt</li>
<li><i class="iconic-eyedropper"></i> iconic-eyedropper</li>
<li><i class="iconic-layers"></i> iconic-layers</li>
<li><i class="iconic-layers-alt"></i> iconic-layers-alt</li>
<li><i class="iconic-target"></i> iconic-target</li>
<li><i class="iconic-tag"></i> iconic-tag</li>
<li><i class="iconic-tag-stroke"></i> iconic-tag-stroke</li>
<li><i class="iconic-rss"></i> iconic-rss</li>
<li><i class="iconic-rss-alt"></i> iconic-rss-alt</li>
<li><i class="iconic-share"></i> iconic-share</li>
<li><i class="iconic-undo"></i> iconic-undo</li>
<li><i class="iconic-curved-arrow"></i> iconic-curved-arrow</li>
<li><i class="iconic-key"></i> iconic-key</li>
<li><i class="iconic-key-stroke"></i> iconic-key-stroke</li>
<li><i class="iconic-lock"></i> iconic-lock</li>
<li><i class="iconic-lock-stroke"></i> iconic-lock-stroke</li>
<li><i class="iconic-unlock"></i> iconic-unlock</li>
<li><i class="iconic-unlock-stroke"></i> iconic-unlock-stroke</li>
<li><i class="iconic-steering-wheel"></i> iconic-steering-wheel</li>
<li><i class="iconic-arrow-left"></i> iconic-arrow-left</li>
<li><i class="iconic-arrow-up"></i> iconic-arrow-up</li>
<li><i class="iconic-arrow-right"></i> iconic-arrow-right</li>
<li><i class="iconic-arrow-down"></i> iconic-arrow-down</li>
<li><i class="iconic-move"></i> iconic-move</li>
<li><i class="iconic-move-alt"></i> iconic-move-alt</li>
<li><i class="iconic-move-horizontal"></i> iconic-move-horizontal</li>
<li><i class="iconic-move-horizontal-alt"></i> iconic-move-horizontal-alt</li>
<li><i class="iconic-move-vertical"></i> iconic-move-vertical</li>
<li><i class="iconic-move-vertical-alt"></i> iconic-move-vertical-alt</li>
<li><i class="iconic-o-arrow-left"></i> iconic-o-arrow-left</li>
<li><i class="iconic-o-arrow-left-alt"></i> iconic-o-arrow-left-alt</li>
<li><i class="iconic-o-arrow-up"></i> iconic-o-arrow-up</li>
<li><i class="iconic-o-arrow-up-alt"></i> iconic-o-arrow-up-alt</li>
<li><i class="iconic-o-arrow-right"></i> iconic-o-arrow-right</li>
<li><i class="iconic-o-arrow-right-alt"></i> iconic-o-arrow-right-alt</li>
<li><i class="iconic-o-arrow-down"></i> iconic-o-arrow-down</li>
<li><i class="iconic-o-arrow-down-alt"></i> iconic-o-arrow-down-alt</li>
<li><i class="iconic-o-move"></i> iconic-o-move</li>
<li><i class="iconic-o-move-horizontal"></i> iconic-o-move-horizontal</li>
<li><i class="iconic-o-move-vertical"></i> iconic-o-move-vertical</li>
<li><i class="iconic-fullscreen"></i> iconic-fullscreen</li>
<li><i class="iconic-fullscreen-alt"></i> iconic-fullscreen-alt</li>
<li><i class="iconic-fullscreen-exit"></i> iconic-fullscreen-exit</li>
<li><i class="iconic-fullscreen-exit-alt"></i> iconic-fullscreen-exit-alt</li>
<li><i class="iconic-new-window"></i> iconic-new-window</li>
<li><i class="iconic-reload"></i> iconic-reload</li>
<li><i class="iconic-reload-alt"></i> iconic-reload-alt</li>
<li><i class="iconic-loop"></i> iconic-loop</li>
<li><i class="iconic-loop-alt"></i> iconic-loop-alt</li>
<li><i class="iconic-back-forth"></i> iconic-back-forth</li>
<li><i class="iconic-back-forth-alt"></i> iconic-back-forth-alt</li>
<li><i class="iconic-spin"></i> iconic-spin</li>
<li><i class="iconic-spin-alt"></i> iconic-spin-alt</li>
<li><i class="iconic-transfer"></i> iconic-transfer</li>
<li><i class="iconic-download"></i> iconic-download</li>
<li><i class="iconic-upload"></i> iconic-upload</li>
<li><i class="iconic-cloud-download"></i> iconic-cloud-download</li>
<li><i class="iconic-cloud-upload"></i> iconic-cloud-upload</li>
<li><i class="iconic-article"></i> iconic-article</li>
<li><i class="iconic-read-more"></i> iconic-read-more</li>
<li><i class="iconic-list"></i> iconic-list</li>
<li><i class="iconic-list-nested"></i> iconic-list-nested</li>
<li><i class="iconic-play"></i> iconic-play</li>
<li><i class="iconic-o-play"></i> iconic-o-play</li>
<li><i class="iconic-pause"></i> iconic-pause</li>
<li><i class="iconic-stop"></i> iconic-stop</li>
<li><i class="iconic-eject"></i> iconic-eject</li>
<li><i class="iconic-first"></i> iconic-first</li>
<li><i class="iconic-last"></i> iconic-last</li>
<li><i class="iconic-volume"></i> iconic-volume</li>
<li><i class="iconic-volume-mute"></i> iconic-volume-mute</li>
<li><i class="iconic-headphones"></i> iconic-headphones</li>
<li><i class="iconic-mic"></i> iconic-mic</li>
<li><i class="iconic-equalizer"></i> iconic-equalizer</li>
<li><i class="iconic-battery-half"></i> iconic-battery-half</li>
<li><i class="iconic-battery-empty"></i> iconic-battery-empty</li>
<li><i class="iconic-battery-charging"></i> iconic-battery-charging</li>
<li><i class="iconic-battery-full"></i> iconic-battery-full</li>
<li><i class="iconic-bars"></i> iconic-bars</li>
<li><i class="iconic-bars-alt"></i> iconic-bars-alt</li>
<li><i class="iconic-movie"></i> iconic-movie</li>
<li><i class="iconic-cd"></i> iconic-cd</li>
<li><i class="iconic-folder"></i> iconic-folder</li>
<li><i class="iconic-folder-stroke"></i> iconic-folder-stroke</li>
<li><i class="iconic-document"></i> iconic-document</li>
<li><i class="iconic-document-stroke"></i> iconic-document-stroke</li>
<li><i class="iconic-document-alt"></i> iconic-document-alt</li>
<li><i class="iconic-document-alt-stroke"></i> iconic-document-alt-stroke</li>
<li><i class="iconic-pin"></i> iconic-pin</li>
<li><i class="iconic-map-pin"></i> iconic-map-pin</li>
<li><i class="iconic-map-pin-stroke"></i> iconic-map-pin-stroke</li>
<li><i class="iconic-map-pin-alt"></i> iconic-map-pin-alt</li>
<li><i class="iconic-book"></i> iconic-book</li>
<li><i class="iconic-book-alt"></i> iconic-book-alt</li>
<li><i class="iconic-book-alt2"></i> iconic-book-alt2</li>
<li><i class="iconic-calendar"></i> iconic-calendar</li>
<li><i class="iconic-calendar-alt"></i> iconic-calendar-alt</li>
<li><i class="iconic-calendar-alt-stroke"></i> iconic-calendar-alt-stroke</li>
<li><i class="iconic-iphone"></i> iconic-iphone</li>
<li><i class="iconic-camera"></i> iconic-camera</li>
<li><i class="iconic-beaker"></i> iconic-beaker</li>
<li><i class="iconic-beaker-alt"></i> iconic-beaker-alt</li>
</ul>
<h3>Iconic icons attributions</h3>
<p>The <a href="http://somerandomdude.com/work/iconic/" target="_blank">Iconic icons</a> have been created by P.J. Onori of the <i>Some Random Dude</i> blog.</p>
<h3>How to use</h3>
<p>For iconic icons you can use an <code>&lt;i&gt;</code> tag, just like regular for icons. To use, place the following code just about anywhere:</p>
<pre class="prettyprint linenums">
&lt;i class="iconic-search"&gt;&lt;/i&gt;
</pre>
<h3>Styling</h3>
<p>Since iconic icons are a font, they will automatically match the text size and style. You can even use text effects, like <code>text-shadow</code>.</p>
<div class="bs-docs-example">
<p>An external <a href="#"><i class="iconic-link"></i> link</a> and some <i><i class="iconic-lock"></i> italic text</i>.</p>
<p style="font-size: 20px;"><i class="iconic-o-check"></i> <i class="iconic-o-check" style="color: #999999"></i> <i class="iconic-o-check" style="color: #0044CC"></i> <i class="iconic-o-check" style="color: #2F96B4"></i> <i class="iconic-o-check" style="color: #51A351"></i> <i class="iconic-o-check" style="color: #F89406"></i> <i class="iconic-o-check" style="color: #BD362F"></i> <i class="iconic-o-check" style="color: purple"></i></p>
<p style="font-size: 20px; color: #468847"><i class="iconic-check"></i> Approved</p>
<p><span style="color: #F89406; font-weight: bold; text-shadow: 1px 1px 4px #F89406"><i class="iconic-rss"></i> RSS feed</span></p>
</div>
</section>
</div>
</div>
@@ -1903,8 +2304,10 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<div class="container">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="http://somerandomdude.com/work/iconic/">Iconic icon set font</a>, licensed under the <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL">SIL Open Font License</a>.</p>
<ul class="footer-links">
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
@@ -1934,9 +2337,10 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
<script src="assets/js/bootstrap-inputmask.js"></script>
<script src="assets/js/bootstrap-rowlink.js"></script>
<script src="assets/js/bootstrap-fileupload.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>