jadeサンプル(ブートストラップ)

basic_marketing_site.jade

doctype 5
html(lang='ja')
  head
    title Bootstrap, from Twitter
    meta(charset='utf8')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css')
    style
      body {
        padding-top: 60px;
      }
    script(src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js')
    script(src='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js')
  body

    div.navbar.navbar-inverse.navbar-fixed-top
      .navbar-inner
        .container
          button.btn.btn-navbar(type="button", data-toggle="collapse", data-target=".nav-collapse")
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.brand(href='#') Project Name
          div.nav-collapse.collapse
            links = [{name:'Home', url: '#home'},{name:'About', url:'#about'},{name:'Contact', url:'#contact'}]
            ul.nav
              each link, index in links
                if index == 0
                  li.active
                   a(href='#{link.url}') #{link.name}
                else
                  li
                    a(href='#{link.url}') #{link.name}

              li.dropdown
                a.dropdown-toggle(href='#', data-toggle='dropdown') Dropdown
                  b.caret
                ul.dropdown-menu
                  drops = [{name:'About', url:'#'},{name:'Another action', url:'#'},{name:'Something else here', url:'#'},{name:'Nav header', class:'nav-header'},{name:'Separated link', url:'#'},{name:'One more separated link', url:'#'}]
                  each drop, index in drops
                    if drop.class == 'nav-header'
                      li(class='#{drop.class}') #{drop.name}
                    else
                      li
                        a(href='#{drop.url}') #{drop.name}

    .container
      .hero-unit
        h1 Hello, World!
        p This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
        p
          a.btn.btn-primary.btn-large(href='#') Learn more »

      .row
        messages = [{title:'Heading', message:'Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.'},{title:'Heading', message:'Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.'},{title:'Heading', message:'Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.'}]
        each item in messages
          .span4
            h2 #{item.title}
            p #{item.message}
            p
              a.btn(href='#') View details »

      hr

      footer
        p © Company 2013