navbar build by "Bootstrap3.x + RubyOnRails +Haml"
layout/application.haml:--------------------------------------------------------------------------------------
!!!
%html
%head
%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}
%title= content_for?(:title) ? yield(:title) : "Pb Server"
%meta{:content => content_for?(:description) ? yield(:description) : "Pb Server", :name => "description"}
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
= javascript_include_tag "application", "data-turbolinks-track" => true
= csrf_meta_tags
%body
%header
= render 'layouts/navigation'
%main{:role => "main"}
= render 'layouts/messages'
= yield
=render 'layouts/footer'
layouts/-navigation.haml---------------------------------------------------------------------------------------
%nav.navbar.navbar-inverse.navbar-fixed-top
.container
.navbar-header(style=" width:10%")
%button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", 'type '=> "button"}
%span.sr-only Toggle navigation
%span.icon-bar
%span.icon-bar
%span.icon-bar
%h3(style="margin:0px" )
%span.navbar-brand.glyphicon.glyphicon-ok-circle
%span.navbar-brand(style="padding-left:25px" )= link_to 'Theme', root_path
.collapse.navbar-collapse
%ul.nav.navbar-nav.navbar-right
= render 'layouts/navigation_links'
layouts/_navigation_links.haml-------------------------------------------------------------------------
%li= link_to '主页', root_path, class: 'navbar-brand'
%li= link_to '帮助', '#', class: 'navbar-brand'
- if signed_in?
%li= link_to "所有用户", users_path, method: 'get', class: 'navbar-brand'
.navbar-brand
%a.dropdown-toggle{"data-toggle" => "dropdown", :href => "#"}
%b.caret
我的帐户
%ul.dropdown-menu
%li= link_to "帐户资料 ", root_path
%li= link_to "设置", edit_user_path(current_user)
%li.divider
%li= link_to "退出登录", signout_path, method: "delete"
- else
%li= link_to '登录', signin_path, class: 'navbar-brand'
layout/_messages.haml:----------------------------------------------------------------------------------
- flash.each do |name, msg|
- if msg.is_a?(String)
%div{:class => "alert alert-#{name == :notice ? 'success' : 'danger'}"}
%button.close{"aria-hidden" => "true", "data-dismiss" => "alert", :type => "button"} ×
= content_tag :div, msg, :id => "flash_#{name}"
layout/_footer.haml:----------------------------------------------------------------------------------------
%footer
%p.text-center
Copyright ©2013 agoagirl.com All Rights Reserved. 京ICP备********号
普通页面.haml-----------------------------------------------------------------------------------------------
%div(style="min-height:520px" )
.container
.row.row-offcanvas.row-offcanvas-right
.col-xs-12.col-sm-9
%p.pull-right.visible-xs
%button.btn.btn-primary.btn-xs(type="button" data-toggle="offcanvas")Toggle nav
.jumbotron(style="padding-left:0px" )
%h1 欢迎使用‘活动通’
%p 离散数学及其应用，扎瓦思科瑞普特权威指南，重构，敏捷开发及其实践加上一本，命令行脚本基础编程。
.row
.col-6.col-sm-6.col-lg-4
%h2 离散数学
%p 重构，敏捷开发及其实践加上一本，命令行脚本基础编程。离散数学及其应用，扎瓦思科瑞普特权威指南，重构，敏捷开发及其实践加上一本，命令行脚本基础编程。
%p.pull-right
%a.btn.btn-info( href="#" role="button") 详情 »
.col-6.col-sm-6.col-lg-4
%h2 离散数学
%p 敏捷开发及其实践加上一本，命令行脚本基础编程。离散数学及其应用，扎瓦思科瑞普特权威指南，重构，敏捷开发及其实践加上一本，命令行脚本基础编程。
%p.pull-right
%a.btn.btn-info( href="#" role="button") 详情 »
.col-6.col-sm-6.col-lg-4
%h2 离散数学
%p 离散数学及其应用，扎瓦思科瑞普特权威指南，重构，敏捷开发及其实践加上一本，命令行脚本基础编程。
%p.pull-right
%a.btn.btn-info( href="#" role="button") 详情 »
%hr
%hr
%hr
%hr
.col-sm-2.col-sm-offset-1
= link_to '注 册', signup_path, class: 'btn btn-lg btn-block btn-primary'