Theme Template for Bootstrap - Generic Templates

Code

&lt;h3&gt;${templates.icon.bootstrap "picture"} ${templates.icon.bootstrap "tag"}&lt;/h3&gt;

Code

&lt;h3&gt;${templates.icon.font-awesome "linux"} ${templates.icon.font-awesome "code"}&lt;/h3&gt;

Code

templates.bootstrap.breadcrumbs {
  breadcrumbs = [ { title = "Home"; path = "/index.html"; } { title = "Library"; path = "/library/index.html"; } ];
  title = "Data";
}

Code

templates.bootstrap.pager {
  pages = genList (x: { path = "/#${toString (x + 1)}"; }) 10;
  index = 5;
}

Code

templates.bootstrap.pagination {
  pages = genList (x: { path = "/#${toString (x + 1)}"; }) 10;
  index = 5;
}

Code

templates.bootstrap.pagination {
  pages = genList (x: { path = "/#${toString (x + 1)}"; }) 100;
  index = 50;
  pagesLimit = 11;
}

default primary success info warning danger

Code

mapTemplate (t:
  templates.bootstrap.label { content = t; type = t; }
) [ "default" "primary" "success" "info" "warning" "danger" ]

Inbox 42

Code

&lt;p&gt;
 &lt;a href=&quot;#&quot;&gt;Inbox ${templates.bootstrap.badge 42}&lt;/a&gt;
&lt;/p&gt;
&lt;ul class=&quot;nav nav-pills&quot; role=&quot;tablist&quot;&gt;
  &lt;li role=&quot;presentation&quot; class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home ${templates.bootstrap.badge 42}&lt;/a&gt;&lt;/li&gt;
  &lt;li role=&quot;presentation&quot;&gt;&lt;a href=&quot;#&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li role=&quot;presentation&quot;&gt;&lt;a href=&quot;#&quot;&gt;Messages ${templates.bootstrap.badge 3}&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

Code

templates.bootstrap.navbar.default {
  inverted = true;
  id = &quot;example1&quot;;
  brand = ''&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Project Name&lt;/a&gt;'';
  content = [
    (templates.bootstrap.navbar.nav {
      items = [
        { title = &quot;Home&quot;;    path = &quot;/#&quot;; }
        { title = &quot;About&quot;;   path = &quot;/#about&quot;; }
        { title = &quot;Contact&quot;; path = &quot;/#contact&quot;; }
      ];
      # Hack for demonstration purposes, the current page attribute set should be passed
      currentPage = { title = &quot;Home&quot;; path = &quot;/#&quot;; };
    })
  ];
}
+
templates.bootstrap.navbar.default {
  brand = ''&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Project Name&lt;/a&gt;'';
  id = &quot;example2&quot;;
  content = [
    (templates.bootstrap.navbar.nav {
      items = [
        { title = &quot;Home&quot;;    path = &quot;/#&quot;; }
        { title = &quot;About&quot;;   path = &quot;/#about&quot;; }
        { title = &quot;Contact&quot;; path = &quot;/#contact&quot;; }
      ];
      # Hack for demonstration purposes, the current page attribute set should be passed
      currentPage = { title = &quot;Home&quot;; path = &quot;/#&quot;; };
    })
  ];
}

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Oh snap! Change a few things up and try submitting again.

Code

${templates.bootstrap.alert { type = &quot;success&quot;; content = &quot;&lt;strong&gt;Well done!&lt;/strong&gt; You successfully read this important alert message.&quot;; } }
${templates.bootstrap.alert { type = &quot;info&quot;;    content = &quot;&lt;strong&gt;Heads up!&lt;/strong&gt; This alert needs your attention, but it's not super important.&quot;; } }
${templates.bootstrap.alert { type = &quot;warning&quot;; content = &quot;&lt;strong&gt;Heads up!&lt;/strong&gt; This alert needs your attention, but it's not super important.&quot;; } }
${templates.bootstrap.alert { type = &quot;danger&quot;;  content = &quot;&lt;strong&gt;Oh snap!&lt;/strong&gt; Change a few things up and try submitting again.&quot;; } }

Code

${templates.bootstrap.progress-bar { value = 60; }}
${templates.bootstrap.progress-bar { value = 40; type = "success"; }}
${templates.bootstrap.progress-bar { value = 20; type = "info"; }}
${templates.bootstrap.progress-bar { value = 60; type = "warning"; }}
${templates.bootstrap.progress-bar { value = 80; type = "danger"; }}
${templates.bootstrap.progress-bar { value = 60; type = "stripped"; }}

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Code

&lt;div class=&quot;col-sm-4&quot;&gt;
  ${templates.bootstrap.panel {
    heading = ''&lt;h3 class=&quot;panel-title&quot;&gt;Panel title&lt;/h3&gt;'';
    body    = &quot;Panel content&quot;; }}
  ${templates.bootstrap.panel {
    type    = &quot;primary&quot;;
    heading = ''&lt;h3 class=&quot;panel-title&quot;&gt;Panel title&lt;/h3&gt;'';
    body    = &quot;Panel content&quot;; }}
&lt;/div&gt;&lt;!-- /.col-sm-4 --&gt;
&lt;div class=&quot;col-sm-4&quot;&gt;
  ${templates.bootstrap.panel {
    type    = &quot;success&quot;;
    heading = ''&lt;h3 class=&quot;panel-title&quot;&gt;Panel title&lt;/h3&gt;'';
    body    = &quot;Panel content&quot;; }}
  ${templates.bootstrap.panel {
    type    = &quot;info&quot;;
    heading = ''&lt;h3 class=&quot;panel-title&quot;&gt;Panel title&lt;/h3&gt;'';
    body    = &quot;Panel content&quot;; }}
&lt;/div&gt;&lt;!-- /.col-sm-4 --&gt;
&lt;div class=&quot;col-sm-4&quot;&gt;
  ${templates.bootstrap.panel {
    type    = &quot;warning&quot;;
    heading = ''&lt;h3 class=&quot;panel-title&quot;&gt;Panel title&lt;/h3&gt;'';
    body    = &quot;Panel content&quot;; }}
  ${templates.bootstrap.panel {
    type    = &quot;danger&quot;;
    heading = ''&lt;h3 class=&quot;panel-title&quot;&gt;Panel title&lt;/h3&gt;'';
    body    = &quot;Panel content&quot;; }}
&lt;/div&gt;&lt;!-- /.col-sm-4 --&gt;

Glyphicons

Code

Font Awesome icons

Code

Breadcrumbs

Code

Pager

Code

Pagination

Code

Code

Labels

default primary success info warning danger

Code

Badges

Code

Navbars

Code

Alerts

Code

Progress bars

Code

Panels

Panel title

Panel title

Panel title

Panel title

Panel title

Panel title

Code