简介

如果您正在开发Ruby on rails应用程序)，您可能会对向项目添加样式以促进用户参与感兴趣。要做到这一点，一种方法是添加Bootstrap，)，这是一个旨在简化Web项目响应性和移动性的过程。通过在Rails项目中实现Bootstrap，您可以将其布局约定和组件集成到您的应用程序中，从而使用户与您的站点的交互更具吸引力。

在本教程中，您将把Bootstrap添加到一个现有的Rails项目中，该项目使用webpack来为其https://webpack.js.org/)资产提供服务。目标是创建一个视觉上有吸引力的网站，用户可以与之互动，分享有关鲨鱼的信息：

Application登陆Page

前提条件

要学习本教程，您需要：

运行Ubuntu 18.04的本地机器或开发服务器。您的开发机器应该有一个拥有管理权限的非超级用户，并且防火墙配置了ufw。有关如何设置的说明，请参阅我们的使用Ubuntu 18.04的初始服务器设置》教程。
本地机器或开发服务器上安装了node.js和npm)。本教程使用Node.js版本10.16.3和NPM版本6.9.0。有关在Ubuntu18.04上安装node.js和npm的指导，请按照How to Install Node.js on Ubuntu 18.04.》(如何在Ubuntu上安装Node.js)的 使用PPA安装** 部分中的说明进行操作
ruby，rbenv，和rails安装在本地机器或开发服务器上，遵循如何在Ubuntu 18.04.上使用rbenv安装Ruby on rails》中的 步骤1-4** 本教程使用Ruby 2.5.1、rbenv 1.1.2和rails 5.2.3。
安装了SQLite，遵循如何构建Ruby on rails Application.]的 步骤1** 本教程使用SQLite 3 3.22.0。

第一步-克隆项目并安装依赖项

我们的第一步是从DigitalOcean社区GitHub帐户克隆 rails-stimulus.存储库该资源库包括How to Add Stimulus to a Ruby on rails Application，](https://stimulusjs.org/))中描述的设置中的代码，其中描述了如何将Stimulus.js添加到现有的rails 5项目中。

将仓库克隆到名为rails-bootstrap的目录下：

1git clone https://github.com/do-community/rails-stimulus.git rails-bootstrap

导航到rails-bootstrap目录：

1cd rails-bootstrap

为了使用项目代码，您首先需要安装项目的依赖项，这些依赖项在其Gemfile中列出。使用以下命令安装所需的gem：

1bundle install

接下来，您将安装[Yarn]（yarnpkg.com)依赖项。因为这个Rails 5项目已经被修改为使用webpack提供资产，所以它的JavaScript依赖项现在由Yarn管理。这意味着需要安装并验证项目的package.json文件中列出的依赖项。

运行以下命令以安装这些依赖项：

1yarn install --check-files

--check-files标志检查以确保任何已经安装在node_modules目录中的文件没有被删除。

接下来，运行您的数据库迁移：

1rails db:migrate

迁移完成后，您可以测试应用程序，以确保它按预期工作。如果您在本地工作，请使用以下命令启动服务器：

1rails s

如果您使用的是开发服务器，则可以使用以下命令启动应用程序：

1rails s --binding=your_server_ip

导航到本地主机：3000或http://your_server_ip:3000.您将看到以下登录页面：

Application登陆页

要创建新的鲨鱼，请点击页面底部的新建鲨鱼 链接，这将带您进入鲨鱼/新路线。由于该项目的身份验证settings.]，系统将提示您输入用户名(** sammy** )和密码(** Shark** new视图如下所示：

新建Shark

要验证应用程序是否正常工作，我们可以向其添加一些演示信息。在姓名栏中输入Great White，在** 事实** 栏中输入scary：

添加大白Shark

点击创建鲨鱼 按钮，即可创建鲨鱼：

显示Shark

现在，您已经为项目安装了必要的依赖项并测试了其功能。接下来，您可以对Rails应用程序进行一些更改，以便用户在导航到Shark信息应用程序本身之前会遇到一个主登录页面。

第二步-添加主登录页面和控制器

当前应用程序将根视图设置为主鲨鱼信息页面，即sharks控制器的index视图。虽然这可以让用户访问主应用程序，但如果我们决定将来开发应用程序并添加其他功能和特性，这可能就不那么理想了。我们可以重新组织应用程序，将根视图设置为一个home控制器，它将包括一个index视图。从那里，我们可以链接到应用程序的其他部分。

要创建home控制器，可以使用带有generate](https://guides.rubyonrails.org/command_line.html# rails-generate)生成器的[rails控制器命令。在本例中，我们将指定我们的主登录页面需要一个index视图：

1rails generate controller home index

创建控制器后，您需要修改项目的config/routes.rb文件中的根视图-该文件指定应用程序的路由声明-因为根视图当前设置为Sharks的index视图。

打开文件：

1nano config/routes.rb

找到下面这一行：

1[label ~/rails-bootstrap/config/routes.rb]
2. . . 
3root 'sharks#index'
4. . .

将其更改为以下内容：

1[label ~/rails-bootstrap/config/routes.rb]
2. . . 
3root 'home#index'
4. . .

这将把home‘控制器的index`视图设置为应用程序的根，从而可以从那里分支到应用程序的其他部分。

编辑完成后，保存并关闭文件。

完成这些更改后，您就可以继续向应用程序添加Bootstrap了。

第三步-安装Bootstrap并添加自定义样式

在本步骤中，您将向项目添加Bootstrap，以及正常运行所需的工具库。这将涉及将库和插件导入到应用程序的webpack入口点和环境文件中。它还将涉及在应用程序的app/javascript目录中创建自定义样式表，该目录是项目的JavaScript资产所在的目录。

首先使用ya n安装Bootstrap及其所需的依赖项：

1yarn add bootstrap jquery popper.js

Bootstrap的许多组件需要JQuery和[Popper.js)(https://popper.js.org/)，以及Bootstrap自己的定制插件，因此此命令将确保您拥有所需的库。

接下来，用nan或您喜欢的编辑器打开您的主webpack配置文件config/webpack/Environmental ment.js：

1nano config/webpack/environment.js

在文件中，添加webpack库，以及告诉Bootstrap如何解释JQuery和Popper变量的ProvidePlugin。

将以下代码添加到文件中：

 1[label ~/rails-bootstrap/config/webpack/environment.js]
 2const { environment } = require('@rails/webpacker')
 3const webpack = require("webpack") 
 4
 5environment.plugins.append("Provide", new webpack.ProvidePlugin({ 
 6  $: 'jquery',
 7  jQuery: 'jquery',
 8  Popper: ['popper.js', 'default']
 9}))  
10
11module.exports = environment

在使用JQuery或Popper模块时，ProaviPlugin帮助我们避免了通常会用到的多个导入或要求语句。有了这个插件，webpack将自动加载正确的模块，并将命名变量指向每个模块已加载的导出。

编辑完成后，保存并关闭文件。

接下来，打开您的主webpack入口点文件app/javascript/pack/appation.js：

1nano app/javascript/packs/application.js

在文件中，添加以下port语句以导入Bootstrap和您接下来将创建的自定义scss样式文件：

1. . . 
2[label ~/rails-bootstrap/app/javascript/packs/application.js]
3import { Application } from "stimulus"
4import { definitionsFromContext } from "stimulus/webpack-helpers"
5
6import "bootstrap"
7import "../stylesheets/application"
8. . .

编辑完成后，保存并关闭文件。

接下来，为您的应用程序样式表创建一个style heets目录：

1mkdir app/javascript/stylesheets

打开自定义样式文件：

1nano app/javascript/stylesheets/application.scss

这是一个`scss‘文件，它使用sass而不是CSS.Sass，或语法上很棒的样式表，是一种允许开发人员将编程逻辑和约定(如共享变量)集成到样式规则中的CSS扩展语言。

在文件中，添加以下语句以导入项目的自定义Bootstrapscss样式和Google字体：

1[label ~/rails-bootstrap/app/javascript/stylesheets/application.scss]
2@import "~bootstrap/scss/bootstrap";
3@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

接下来，为应用程序添加以下自定义变量定义和样式：

 1[label ~/rails-bootstrap/app/javascript/stylesheets/application.scss]
 2. . .
 3$white: white;
 4$black: black;
 5
 6.navbar {
 7        margin-bottom: 0;
 8        background: $black;
 9}
10body {
11        background: $black;
12        color: $white;
13        font-family: 'Merriweather', sans-serif;
14}
15h1,
16h2 {
17        font-weight: bold;
18}
19p {
20        font-size: 16px;
21        color: $white;
22}
23a:visited {
24        color: $black;
25}
26.jumbotron {
27        background: #0048CD;
28        color: $white;
29        text-align: center;
30        p {
31                color: $white;
32                font-size: 26px;
33        }
34}
35.link {
36        color: $white;
37}
38.btn-primary {
39        color: $white;
40        border-color: $white;
41        margin-bottom: 5px;
42}
43.btn-sm {
44        background-color: $white;
45        display: inline-block;
46}
47img,
48video,
49audio {
50        margin-top: 20px;
51        max-width: 80%;
52}
53caption {
54
55        float: left;
56        clear: both;
57
58}

编辑完成后，保存并关闭文件。

您已经向项目中添加了Bootstrap，以及一些自定义样式。现在，您可以继续将Bootstrap布局约定和组件集成到应用程序文件中。

Step 4 -修改应用布局

将Bootstrap约定和组件集成到项目中的第一步是将它们添加到主应用程序布局文件中。该文件设置将包含在应用程序的每个渲染视图模板中的元素。在该文件中，我们将确保定义了webpack入口点，同时还添加了对共享导航头partial的引用以及一些允许我们为与Shark应用程序相关联的视图呈现布局的逻辑。

首先，打开您的应用程序的主布局文件app/views/layout/applation.html.erb：

1nano app/views/layouts/application.html.erb

目前，该文件如下所示：

 1[label ~/rails-bootstrap/app/views/layouts/application.html.erb]
 2<!DOCTYPE html>
 3<html>
 4  <head>
 5    <title>Sharkapp</title>
 6    <%= csrf_meta_tags %>
 7    <%= csp_meta_tag %>
 8
 9    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
11  </head>
12
13  <body>
14    <%= yield %>
15  </body>
16</html>

代码呈现了类似跨站点请求伪造保护参数和动态表单的tokens，允许内联脚本标记的每个会话随机数的csp-nonce，以及应用程序的样式表和Java脚本资产。请注意，我们的代码没有javascript_link_tag，而是包括一个javascript_pack_tag，它告诉Rails将我们的主webpack入口点加载到app/javascript/pack/Application.js。

在页面的中，yield语句告诉Rails从视图中插入内容。在本例中，由于我们的应用程序根先前映射到了indexshark视图，因此这将插入该视图中的内容。然而，现在，因为我们已经改变了根视图，这将从home控制器的index视图插入内容。

这引发了几个问题：我们是否希望应用程序的主视图与用户查看Shark应用程序时看到的相同？如果我们希望这些观点有所不同，我们如何实现这一点？

第一步是决定应该在所有应用程序视图中复制什么。我们可以保留下包含的所有内容

，因为我们希望在所有应用程序页面上呈现的主要是标记和元数据。但是，在本节中，我们还可以添加一些东西来自定义所有应用程序视图。

首先，添加Bootstrap为响应行为推荐的viewport元标签：

1[label ~/rails-bootstrap/app/views/layouts/application.html.erb]
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Sharkapp</title>
7    <%= csrf_meta_tags %>
8    <%= csp_meta_tag %>
9. . .

接下来，用将以更动态的方式呈现应用程序标题的代码替换现有的tile代码：

1[label ~/rails-bootstrap/app/views/layouts/application.html.erb]
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
7    <%= csrf_meta_tags %>
8    <%= csp_meta_tag %>
9. . .

添加<meta>标签，以包含对站点的描述：

 1[label ~/rails-bootstrap/app/views/layouts/application.html.erb]
 2<!DOCTYPE html>
 3<html>
 4  <head>
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
 7    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "About Sharks" %>">
 8    <%= csrf_meta_tags %>
 9    <%= csp_meta_tag %>
10. . .

有了这些代码，就可以向布局中添加导航部分。理想情况下，我们应用程序的每个页面都应该在页面顶部包含一个navbar组件，这样用户就可以轻松地从站点的一个部分导航到另一个部分。

在<body>标签下，添加一个<header>标签和以下render语句：

1[label ~/rails-bootstrap/app/views/layouts/application.html.erb]
2  <body>
3    <header>
4      <%= render 'layouts/navigation' %>
5    </header>
6
7    <%= yield %>
8. . .

这个<Header>标签允许您组织页面内容，将导航栏与主页面内容分开。

最后，您可以添加一个<main>元素标记和一些逻辑来控制应用程序将呈现哪个视图以及哪个布局。这段代码使用content_for方法来引用一个内容标识符，我们将在下一步中将其与sharks布局相关联。

将现有的yeeld语句替换为以下内容：

 1[label ~/rails-bootstrap/app/views/layouts/application.html.erb]
 2. . . 
 3  <body>
 4    <header>
 5      <%= render 'layouts/navigation' %>
 6    </header>
 7    <main role="main">
 8    <%= content_for?(:content) ? yield(:content) : yield %>
 9    </main>
10  </body>
11</html>

现在，如果设置了：Content块，应用程序将生成关联的布局。否则，多亏了三元操作符，它将隐式生成与‘home’控制器关联的视图。

进行这些更改后，保存并关闭该文件。

有了应用程序范围的布局设置，您可以继续为shark视图创建共享导航栏部分和shark布局。

第五步-创建共享的局部布局和具体布局

除了您在上一步中对应用程序布局所做的更改之外，您还需要创建共享的导航栏部分、您在app/views/layout/Applation.html.erb中引用的Sharks布局以及应用程序登录页的视图。您还可以将Bootstrap样式添加到应用程序的当前Link_to元素中，以便利用内置的Bootstrap样式。

首先，打开共享导航栏部分的文件：

1nano app/views/layouts/_navigation.html.erb

将以下代码添加到文件中以创建导航栏：

 1[label ~/rails-bootstrap/app/views/layouts/_navigation.html.erb]
 2<nav class="navbar navbar-dark navbar-static-top navbar-expand-md">
 3    <div class="container">
 4        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
 5        </button> <%= link_to "Everything Sharks", root_path, class: 'navbar-brand' %>
 6        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 7            <ul class="nav navbar-nav mr-auto">
 8            <li class='nav-item'><%= link_to 'Home', home_index_path, class: 'nav-link' %></li>
 9            <li class='nav-item'><%= link_to 'Sharks', sharks_path, class: 'nav-link' %></li>  
10
11                </li>
12            </ul>
13        </div>
14    </div>
15</nav>

此导航栏使用link_to方法创建应用程序根目录的链接，该方法映射到应用程序根路径。导航栏还包含两个额外的链接：一个指向Home路径，它映射到home控制器的index视图；另一个指向Shark应用程序路径，它映射到Shark``index视图。

编辑完成后，保存并关闭文件。

接下来，打开Sharks布局的layouts目录中的文件：

1nano app/views/layouts/sharks.html.erb

在添加布局功能之前，我们需要确保布局的内容设置为我们在主应用布局中引用的：Content块。将以下行添加到文件以创建块：

1[label ~/rails-bootstrap/app/views/layouts/sharks.html.erb]
2<% content_for :content do %>
3<% end %>

每当控制器请求Sharks视图时，我们将要在此块中编写的代码都会呈现在app/views/layouts文件中的：Content块中。

接下来，在块本身内，添加以下代码以创建一个jumbotron组件和两个containers：

 1[label ~/rails-bootstrap/app/views/layouts/sharks.html.erb]
 2<% content_for :content do %>
 3    <div class="jumbotron text-center">
 4        <h1>Shark Info</h1>
 5    </div>
 6    <div class="container">
 7        <div class="row">
 8            <div class="col-lg-6">
 9                <p>
10                    <%= yield %>
11                </p>
12            </div>
13            <div class="col-lg-6">
14                <p>
15
16                    <div class="caption">You can always count on some sharks to be friendly and welcoming!</div>
17                    <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
18                </p>
19
20            </div>
21        </div>
22    </div>
23    <% end %>

第一个容器包含一个yeeld语句，该语句将插入来自‘Shark’控制器视图的内容，而第二个容器包括一个提醒，即某些鲨鱼总是友好和友好的。

最后，在文件的底部，添加以下render语句以呈现应用程序布局：

1[label ~/rails-bootstrap/app/views/layouts/sharks.html.erb]
2. . . 
3            </div>
4        </div>
5    </div>
6    <% end %>
7        <%= render template: "layouts/application" %>

Sharks布局将在主应用程序布局中为命名的：Content块提供内容；然后它将呈现应用程序布局本身，以确保我们呈现的应用程序页面在应用程序范围级别拥有我们想要的一切。

编辑完成后，保存并关闭文件。

我们现在已经有了部分和布局，但是我们还没有创建用户在导航到应用程序主页时将看到的视图，即home控制器的index视图。

立即打开该文件：

1nano app/views/home/index.html.erb

这个视图的结构将与我们为Shark视图定义的布局相匹配，它具有一个主要的Jumbotron组件和两个容器。将文件中的样板代码替换为以下代码：

 1[label ~/rails-bootstrap/app/views/home/index.html.erb]
 2<div class="jumbotron">
 3    <div class="container">
 4        <h1>Want to Learn About Sharks?</h1>
 5        <p>Are you ready to learn about sharks?</p>
 6        <br>
 7        <p>
 8            <%= button_to 'Get Shark Info', sharks_path, :method => :get,  :class => "btn btn-primary btn-lg"%>
 9        </p>
10    </div>
11</div>
12<div class="container">
13    <div class="row">
14        <div class="col-lg-6">
15            <h3>Not all sharks are alike</h3>
16            <p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.
17            </p>
18        </div>
19        <div class="col-lg-6">
20            <h3>Sharks are ancient</h3>
21            <p>There is evidence to suggest that sharks lived up to 400 million years ago.
22            </p>
23        </div>
24    </div>
25</div>

现在，当用户登录到应用程序的主页时，通过单击获取Shark信息 按钮，用户将有一个明确的方式导航到应用程序的Shark部分。该按钮指向Shark_path-映射到与Sharks控制器关联的路由的帮助器。

编辑完成后，保存并关闭文件。

我们的最后一个任务是将应用程序中的一些link_to‘方法转换为可以使用Bootstrap设置样式的按钮。我们还将添加一种从Sharks‘index视图导航回主页的方法。

打开sharks index视图开始：

1nano app/views/sharks/index.html.erb

在文件底部，找到指向new鲨鱼视图的link_to方法：

1[label ~/rails-bootstrap/app/views/sharks/index.html.erb]
2. . .
3<%= link_to 'New Shark', new_shark_path %>

修改代码，将此链接转换为使用Bootstrap的btn btn-main btn-sm类的按钮：

1[label ~/rails-bootstrap/app/views/sharks/index.html.erb]
2. . .
3<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %>

接下来，添加一个指向应用程序主页的链接：

1[label ~/rails-bootstrap/app/views/sharks/index.html.erb]
2. . .
3<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %> <%= link_to 'Home', home_index_path, :class => "btn btn-primary btn-sm" %>

完成编辑后保存并关闭文件。

接下来，打开new视图：

1nano app/views/sharks/new.html.erb

将按钮样式添加到文件底部的Link_to方法中：

1[label ~/rails-bootstrap/app/views/sharks/new.html.erb]
2. . . 
3<%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

保存并关闭该文件。

打开edit视图：

1nano app/views/sharks/edit.html.erb

目前link_to方法的排列方式如下：

1[label ~/rails-bootstrap/app/views/sharks/edit.html.erb]
2. . . 
3<%= link_to 'Show', @shark %> |
4<%= link_to 'Back', sharks_path %>

更改它们在页面上的排列并添加按钮样式，使代码如下所示：

1[label ~/rails-bootstrap/app/views/sharks/edit.html.erb]
2. . . 
3<%= link_to 'Show', @shark, :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

保存并关闭该文件。

最后，打开show视图：

1nano app/views/sharks/show.html.erb

找到以下link_to方法：

1[label ~/rails-bootstrap/app/views/sharks/show.html.erb]
2. . . 
3<%= link_to 'Edit', edit_shark_path(@shark) %> |
4<%= link_to 'Back', sharks_path %>
5. . .

将它们更改为如下所示：

1[label ~/rails-bootstrap/app/views/sharks/show.html.erb]
2. . . 
3<%= link_to 'Edit', edit_shark_path(@shark), :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>
4. . .

保存并关闭该文件。

现在您已经准备好测试应用程序了。

使用适当的命令启动服务器：

rails s如果您在本地工作
rails S--绑定=YOUR_SERVER_IP如果您使用的是开发服务器

根据您是在本地工作还是在服务器上工作，导航到本地主机：3000或http://your_server_ip:3000，。您将看到以下登录页面：

Application登陆Page

点击 获取鲨鱼信息 。您将看到以下页面：

Sharks索引页

现在，您可以使用如何向Ruby on rails Application.添加刺激]中描述的方法来编辑Shark或添加事实和帖子您还可以在对话中添加新的鲨鱼。

当您导航到其他Shark视图时，您将看到Shark布局始终包含在内：

Sharks展示页

现在，您已经将Bootstrap集成到了Rails应用程序中。从这里开始，您可以通过向应用程序添加新的样式和组件来使其对用户更具吸引力。

结论

现在，您已经将Bootstrap集成到您的Rails应用程序中，这将允许您创建响应迅速且视觉上吸引人的样式，以增强您的用户对项目的体验。

要了解更多关于Bootstrap功能及其提供的内容，请参阅Bootstrap文档。你也可以查看Sass文档，了解如何使用它来增强和扩展你的CSS样式和逻辑。

如果您有兴趣了解Bootstrap如何与其他框架集成，请参阅如何使用ANGLE、Bootstrap和APIXU API.构建天气应用您还可以通过阅读How to Set Up a Ruby on rails Project With a Reaction Frontend.》了解它如何与Rails集成并做出反应

如何在 Ruby on Rails 应用程序中添加 Bootstrap

简介

前提条件

第一步-克隆项目并安装依赖项

第二步-添加主登录页面和控制器

第三步-安装Bootstrap并添加自定义样式

Step 4 -修改应用布局