layout.html.erb in railsstrap-4.0.0.beta2

- old
+ new
@@ -1,85 +1,82 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><%%= content_for?(:title) ? yield(:title) : "<%= app_name %>" %></title>
-    <%%= csrf_meta_tags %>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%%= content_for?(:title) ? yield(:title) : "<%= app_name %>" %></title>
+  <%%= csrf_meta_tags %>
 
-    <%%= stylesheet_link_tag "application", :media => "all" %>
+  <%%= stylesheet_link_tag bootstrap_css %>
+  <%%= stylesheet_link_tag bootstrap_theme_css %>
+  <%%= stylesheet_link_tag font_awesome_js %>
+  <%%= stylesheet_link_tag "application", :media => "all" %>
 
-    <!-- For third-generation iPad with high-resolution Retina display: -->
-    <!-- Size should be 144 x 144 pixels -->
-    <%%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
+  <!-- Uncomment these favicon tags as you create them. https://realfavicongenerator.net/ -->
+  <!-- For third-generation iPad with high-resolution Retina display: -->
+  <!-- Size should be 144 x 144 pixels -->
+  <%%#= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type =>
+  'image/png', :sizes => '144x144' %>
 
-    <!-- For iPhone with high-resolution Retina display: -->
-    <!-- Size should be 114 x 114 pixels -->
-    <%%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
+  <!-- For iPhone with high-resolution Retina display: -->
+  <!-- Size should be 114 x 114 pixels -->
+  <%%#= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type =>
+  'image/png', :sizes => '114x114' %>
 
-    <!-- For first- and second-generation iPad: -->
-    <!-- Size should be 72 x 72 pixels -->
-    <%%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
+  <!-- For first- and second-generation iPad: -->
+  <!-- Size should be 72 x 72 pixels -->
+  <%%#= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type =>
+  'image/png', :sizes => '72x72' %>
 
-    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
-    <!-- Size should be 57 x 57 pixels -->
-    <%%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
+  <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+  <!-- Size should be 57 x 57 pixels -->
+  <%%#= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png'
+  %>
 
-    <!-- For all other devices -->
-    <!-- Size should be 32 x 32 pixels -->
-    <%%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
+  <!-- For all other devices -->
+  <!-- Size should be 32 x 32 pixels -->
+  <%%#= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
 
-    <%%= javascript_include_tag "application" %>
-
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
-    <![endif]-->
-  </head>
-  <body>
-
-    <div class="navbar navbar-default navbar-static-top">
-      <div class="container">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="#"><%= app_name %></a>
-        <div class="navbar-collapse collapse navbar-responsive-collapse">
-          <ul class="nav navbar-nav">
-            <li><%%= link_to "Link1", "/path1"  %></li>
-            <li><%%= link_to "Link2", "/path2"  %></li>
-            <li><%%= link_to "Link3", "/path3"  %></li>
-          </ul>
-        </div>
-      </div>
+</head>
+<body>
+<%%= navbar variant: :primary, text_variant: :dark, position: :fixed_top do %>
+  <%%= vertical do %>
+    <%%= content_tag :span, <%= app_name %>, class: 'navbar-brand' %>
+  <%% end %>
+  <%%= horizontal do %>
+    <%%= nav do %>
+      <%%= link_to 'Home', '/', class: 'nav-item' %>
+      <%%= link_to 'Profile', '/profile', class: 'nav-item' %>
+    <%% end %>
+  <%% end %>
+<%% end %>
+<div class="container pt-3">
+  <div class="row">
+    <div class="col-lg-9">
+      <%%= bootstrap_flash  %>
+      <%%= yield %>
     </div>
+    <div class="col-lg-3">
+      <%%= card title: 'Sidebar' do %>
+        <%%= content_tag :div, class: 'card-body' do %>
+          <%%= nav do %>
+            <%%= link_to "Link1", "/path1" %>
+            <%%= link_to "Link2", "/path2" %>
+            <%%= link_to "Link3", "/path3" %>
+          <%% end %>
+        <%% end %>
+      <%% end %>
+    </div>
+  </div>
 
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-9">
-          <%%= bootstrap_flash %>
-          <%%= yield %>
-        </div>
-        <div class="col-lg-3">
-          <div class="well sidebar-nav">
-            <h3>Sidebar</h3>
-            <ul class="nav nav-list">
-              <li class="nav-header">Sidebar</li>
-              <li><%%= link_to "Link1", "/path1"  %></li>
-              <li><%%= link_to "Link2", "/path2"  %></li>
-              <li><%%= link_to "Link3", "/path3"  %></li>
-            </ul>
-          </div><!--/.well -->
-        </div><!--/span-->
-      </div><!--/row-->
+  <footer class="fixed-bottom">
+    <p>&copy; <%= app_name %> <%= Date.today.year %></p>
+  </footer>
 
-      <footer>
-        <p>&copy; Company <%= Date.today.year %></p>
-      </footer>
-
-    </div> <!-- /container -->
-
-  </body>
+</div> <!-- /container -->
+<%%= content_tag :script, nil, src: jquery_js %>
+<%%= content_tag :script, nil, src: popper_js %>
+<%%= content_tag :script, nil, src: bootstrap_js %>
+<%%= javascript_include_tag "application" %>
+</body>
 </html>