Bootstrapでトップページのログイン画面を作ってみる。

ログインできるトップ画面をBootstrapで記述してみました。

CoffeeKupをテンプレートにしています。

views/layout.coffee

doctype 5
html ->
  head ->
    meta charset:'utf-8'
    title 'Share Lunch'
    link rel:'stylesheet', href:'/bootstrap/css/bootstrap.css'
    style type:'text/css', ->
      ''' 
      #container { padding-top: 40px; }
      '''
  body ->
    @body

views/index.coffee

div '#container.container', ->
  div '.hero-unit', ->
    div '.row-fluid', ->
      div '.span9', style:'border-right:1px solid #ddd', ->
          h2 '毎日のランチが楽しくなる'
          h1 'Share Lunch'
          p style:'margin-top:1em;', ->'Share Lunchはランチを楽しく共有できるウェブサービスです。'
          p ->
            a '.btn.btn-primary.btn-large', -> 'アカウント登録（無料）'
      div '.span3', ->
        h4 style:'line-height:3em;',-> 'アカウントをお持ちの方'
        form ->
          input type:'text', placeholder:'メールアドレス'
          input type:'password', placeholder:'パスワード'
          label '.checkbox.gray', ->
            input type:'checkbox'
            'ログイン状態を保存'
          button '.btn.btn-success', type:'submit', -> 'ログイン'

使ってみてわかったのは、日本語と英語の書体の差。日本語の場合、もう少し行間を開けると丁度いいかも。