构建和引导我的 RoR 应用程序答案

【问题标题】：Structure and Bootstrap'ing my RoR application构建和引导我的 RoR 应用程序
【发布时间】：2015-01-25 13:33:51
【问题描述】：

我有一个 Ruby on Rails Web 应用程序，但一般的“外观”有点难看。

我做了一些研究，发现了 Bootstrap。

通过研究，我想到了许多问题：

正如我之前所说，我有一个脚手架式 RoR 应用程序。通过脚手架，它为我的应用程序生成了样式表。它为每个控制器生成一个 application.css 和文件 .css.scss。 application.css 用于应用程序布局，对吗？因此，对于我想要设置样式的每个视图，我都需要在该目录中创建一些 view.css 文件吗？因为该目录只有 .css.scss 文件。

所以我将有一个总体布局。我的目标是：在网站的每个页面中，它都出现相同的“顶部导航栏”和相同的页脚。因此，页面之间唯一不同的“内容”是页面的“正文”。我怎样才能做到这一点？我如何才能在申请布局中创建“页眉”和“页脚”并为下一页的正文留下一个“洞”？这种集成是如何实现的？

这个问题是关于网站结构的。

现在，我需要知道如何将 Bootstrap 合并到我的应用程序中。我应该从头开始制作所有东西还是有一种流畅的方法可以做到这一点？

我的目标是拥有应用程序布局结构，然后在其上使用 Bootstrap。我如何以及在哪里可以做到这一点？以及如何以及在哪里可以将一些 Bootstrap 样式应用到其他页面？

我知道这是基本的东西，但我有点迷失了，我的网站真的很丑。

【问题讨论】：

看看app/views/layouts/application.html.erb。
是的。我理解到样式表、JS 等的链接。但我的一个问题是：如果我在这里制作页眉/页脚，我只需要在其他页面中执行并且它会在假定的位置“加入” ?我是 Rails 新手，有点困惑。
查看<%= yield %> 中的application.html.erb？那是其他模板（您的视图）被替换的地方。看看你浏览器的页面来源，再看看你的观点，再看看application.html.erb，你就会明白我的意思了。

标签： html css ruby-on-rails twitter-bootstrap web-applications

【解决方案1】：

要在 Rails 中使用 Bootstrap，我推荐 gem bootstrap-sass (https://github.com/twbs/bootstrap-sass)，如果你使用 SASS（rails 中的默认 CSS 预处理器）。只需将其添加到 gemfile：

group :assets do
  #...  
  gem 'bootstrap-sass', '3.1.0'
end

并包含在 application.css.scss 清单中：

*= require bootstrap

此时您可以使用引导类编写页面和 CSS 样式表。通常的情况是将您的 CSS 编写在单独的文件中，并要求它们在清单中进行连接（或作为单独的 stylesheet_link_tag 包含）

要创建一些网站常见的面板、导航栏等，您可以使用布局。更多关于 Rails 中的布局 - http://guides.rubyonrails.org/layouts_and_rendering.html#structuring-layouts

例如，layouts/application.html.haml 的结构可能如下：

%html
%head
  %title Rails app
  = stylesheet_link_tag "application", charset: "UTF-8", media: "all"
  ...
%body
  %nav.navbar 
    ...
  %div.container-fluid
    = yield
  %div.footer
    ...

在这种情况下 layouts 声明 HTML 文档，head 带有 meta，将 CSS（带有 Bootstrap）链接到页面并创建导航栏，然后呈现页面（带有 yield）。页面仅包含特定于页面的内容，并按约定从控制器名称和方法中选择，例如控制器HelloWorldController 和方法index 使用视图views/hello_world/index.html.haml：

%p
  Hello world!

要为 Bootstrap 搭建页面，请使用 gem bootstrap-generators (https://github.com/decioferreira/bootstrap-generators)。

UPD。一些常见信息和示例

将布局和部分与页面特定内容相结合的结果是普通的旧 HTML 文档。该文档只能有一个<body\>，并且只有这个<body> 可以有可表示的内容。 Rails 中的布局使您能够将 HTML 生成拆分为多个部分 - 有些东西可以在布局中声明，其他的 - 在页面中。使用布局，您可以根据需要包装页面。但是您应该遵循 HTML 结构并将可见内容放在 <body> 中，包括导航栏。

真实世界的例子是 RubyGems.org，参见：

HTML 页面：http://rubygems.org/
它的来源：布局 - https://github.com/rubygems/rubygems.org/blob/master/app/views/layouts/application.html.erb，页面 - https://github.com/rubygems/rubygems.org/blob/master/app/views/home/index.html.erb

请注意，index.html.erb 没有根元素并使用<div>、<h> 等，因为它只生成结果 HTML 文档的一部分。

application.html.erb 声明文档的所有部分（<html>、<body> 和 <header>、<main>、<footer> 等）并在当前模板（在我们的例子中为 index.html.erb）使用 = yield或者它的一部分（= yield :part_name）应该被渲染。

更多关于yield和content_for的信息你可以在这里找到：http://guides.rubyonrails.org/layouts_and_rendering.html#understanding-yield

【讨论】：

想象一下这一点。我将拥有 App.layout。在那里我只想创建顶部导航栏和页脚（出现在网站的所有视图中）。那么（App.layout）我需要创建吗？或者我只需要在其他视图中创建它？我的主要问题是我不知道如何仅在布局中创建导航顶栏，在其他视图中创建正文，并在 App.layout 中已创建的导航顶栏下方“插入”正文.如果你能帮助我会很棒。如果你愿意，我们可以在其他“地方”讨论这个话题。让我知道。谢谢！ @AlkH
我用一些常见信息和示例更新了答案。希望这会有所帮助！
感谢您的回答！我在 app.layout 上得到它应该是页面结构。但是 index.html 怎么知道把“信息”放在哪里呢？这个标签到底是做什么的？我知道它呈现视图。但是，视图的哪一部分？这种“联系”是如何形成的？你怎么能这样说：“你应该在 index.html 页面中显示该内容？” index.html是怎么放代码的？
查看 Rubygems.org 的另一个页面，您将了解它是如何工作的，例如 github.com/rubygems/rubygems.org/blob/master/app/views/profiles/…。此页面有内容，包装为 content_for :title do ... end、:javascript 且未包装。因此，在布局中，它将相应地呈现为yield :title、yield :javascript 和yield。