examples/rails/app/views/application/index.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag font_awesome_css, bootstrap_css, bootstrap_theme_css %>
<title>Bh test page (Rails)</title>
</head>
<body>
<div class='container'>
<h1>Alerts</h1>
<!-- Try setting different :dismissible and :context options -->
<%= alert_box 'You accepted the Terms of service.' %>
<%= alert_box context: :warning, dismissible: true, id: 'alert', class: :en, data: {js: 1} do %>
<em>Thanks!</em> You accepted the <%= link_to 'Terms of service', '/#terms' %>.
<% end %>
<h1>Panels</h1>
<!-- Try setting different :title, :tag and :context options -->
<%= panel 'You accepted the Terms of service', title: 'Thanks', tag: :aside %>
<%= panel heading: 'Thanks', context: :info, id: 'panel', class: :en, data: {js: 1} do %>
<div class='panel-body'>You accepted the Terms of service. <%= icon :ok %></div>
<% end %>
<h1>Panel rows</h1>
<!-- Try setting a different :column_class option -->
<%= panel_row column_class: 'col-sm-12' do %>
<%= panel 'Plain full-width panel' %>
<% end %>
<%= panel_row column_class: 'col-sm-6', id: 'panel-row', class: :en, data: {js: 1} do %>
<%= panel 'John Smith', title: 'User', context: :info %>
<%= panel title: 'Phone' do %>
<div class='panel-body'><%= icon :earphone %> 323-555-5555</div>
<% end %>
<% end %>
<h1>Modals</h1>
<!-- Try setting different :title, :size, :button or :context options -->
<%= modal 'Do what you want!', button: {size: :small, context: :info} %>
<%= modal title: 'Terms of service', size: :large, id: 'modal', button: {class: :en} do %>
<div class="modal-body">Please accept the Terms of service.</div>
<div class="modal-footer"><button type="button" class="btn btn-primary">Accept</button></div>
<% end %>
<h1>Navs</h1>
<!-- Try setting different :layout or :as options -->
<%= nav do %>
<%= link_to 'Home', '/' %>
<%= link_to 'Users', '/#users' %>
<%= link_to 'Profile', '/#profile' %>
<% end %>
<br />
<%= nav as: :pills, id: 'nav', class: :en, data: {js: 1} do %>
<li class="active"><a href="/">Home</a></li>
<%= link_to 'Users', '/#users' %>
<%= link_to 'Profile', '/#profile' %>
<% end %>
<h1>Navbars</h1>
<!-- Try adding a horizontal element and setting different :inverted, :fluid, :position or :padding options -->
<%= navbar inverted: true do %>
<%= vertical do %>
<%= link_to 'Home', '/' %>
<% end %>
<% end %>
<%= navbar id: 'navbar' do %>
<%= vertical id: 'vertical', class: :en, data: {js: 1} do %>
<%= link_to 'Home', '/' %>
<% end %>
<%= horizontal class: :en, data: {js: 2} do %>
<%= nav class: 'navbar-left' do %>
<%= link_to 'Profile', '/#profile' %>
<%= link_to 'Settings', '/#settings' %>
<% end %>
<% end %>
<% end %>
<h1>Buttons</h1>
<!-- Try setting different :context, :size and :layout options -->
<%= button 'Menu' %>
<%= button context: :warning, id: 'button', class: :en, data: {js: 1} do %>
Your <em>personal</em> menu
<% end %>
<h1>Dropdowns</h1>
<!-- Try setting different :split, :direction, :align, :groupable, :layout, :context or :size options -->
<%= dropdown 'Menu', direction: :up, context: :success, align: :right do %>
<%= link_to 'Home', '/' %>
<%= link_to 'Profile', '/#profile' %>
<%= link_to 'Settings', '/#settings' %>
<% end %>
<%= dropdown 'Menu', split: true, id: 'dropdown', button: {class: :en} do %>
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#"><%= content_tag :em, 'Profile' %></a></li>
<% end %>
<h1>Progress bars</h1>
<!-- Try passing multiple values with different :percentage, :label, :context, :striped, :animated options -->
<%= progress_bar [{percentage: 75, striped: true}, {percentage: 20, context: :warning, label: true}] %>
<%= progress_bar({percentage: 30, id: 'bar', data: {js: 1}}, id: 'container', class: :en) %>
<h1>Icons</h1>
<!-- Try setting a different :library option -->
<%= icon :user %>
<%= icon :user, library: :font_awesome, class: 'fa-2x', id: 'icon', data: {value: 1} %>
<h1>Button to</h1>
<%= button_to 'New', '#new', class: 'b', form_class: 'f', method: :get %>
<br />
<%= button_to 'New', '#new', class: 'b', form_class: 'f', method: :get, context: :primary %>
<%= button_to '/#edit', method: :get, context: :link, id: 'my-btn-to', data: {value: 1} do %>
Button <strong>styled</strong> as a link
<% end %>
<h1>Forms</h1>
<%= form_for User.new, url: '/', method: :get, layout: :basic do |f| %>
<%= f.legend 'User detail' %>
<%= f.email_field :email, label: 'E-mail address' %>
<%= f.password_field :password, placeholder: 'Your Password' %>
<%= f.file_field :avatar %>
<%= f.fieldset 'Newsletter' do %>
<%= f.radio_button :subscribe, true, label: 'Subscribe to newsletter' %>
<%= f.radio_button :subscribe, false, label: 'Do not subscribe to newsletter' %>
<% end %>
<%= f.telephone_field :phone, suffix: '☏' %>
<%= f.check_box :remember_me, checked: true %>
<%= f.submit 'Sign in' %>
<% end %>
</div>
<%= javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' %>
<%= javascript_include_tag bootstrap_js %>
</body>
</html>