Question

我有一个Ruby on Rails Web应用程序，但是一般的＆＃39;外观＆＃39;有点难看。

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

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

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

所以我会有一个总体布局。我的目标是：在网站的每个页面上显示相同的＆＃34;顶部导航栏＆＃34;和同一个页脚。所以，唯一的内容是＆＃39;不同页面的不同之处在于＆＃39; body＆＃39;的页面。我怎样才能做到这一点？如何在应用程序布局中创建＆＃39;标题＆＃39;而且这个页脚＆＃39;并且离开一个＆＃34;洞＆＃34;对于下一页的正文？这种整合是如何形成的？

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

现在，我需要知道如何在我的应用程序中加入Bootstrap。我应该从头开始制作所有东西还是有顺畅的方法来做到这一点？

我的目标是让应用程序布局结构，然后使用Bootstrap。我该怎么做？我如何以及在哪里可以将一些Bootstrap样式应用于其他页面？

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

Answer 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 with meta，将CSS（带Bootstrap）链接到页面并创建navbar，然后呈现页面（带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>等）并使用{{1我应该呈现当前模板（在我们的例子中是= yield）或它的部分（其中index.html.erb）。

您可以在此处找到有关= yield :part_name和yield的更多信息：http://guides.rubyonrails.org/layouts_and_rendering.html#understanding-yield

结构和Bootstrap'ing我的RoR应用程序

1 个答案: