bootstrap 小程序

介绍 (Introduction)

If you are developing a Ruby on Rails application, you may be interested in adding styles to your project to facilitate user engagement. One way to do this is by adding Bootstrap, an HTML, CSS, and JavaScript framework designed to simplify the process of making web projects responsive and mobile ready. By implementing Bootstrap in a Rails project, you can integrate its layout conventions and components into your application to make user interactions with your site more engaging.

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

In this tutorial, you will add Bootstrap to an existing Rails project that uses the webpack bundler to serve its JavaScript and CSS assets. The goal will be to create a visually appealing site that users can interact with to share information about sharks:

在本教程中，您会将Bootstrap添加到使用Webpack捆绑程序为其JavaScript和CSS资产提供服务的现有Rails项目中。 目标是创建一个视觉吸引力的网站，用户可以与该网站进行交互以共享有关鲨鱼的信息：

先决条件 (Prerequisites)

To follow this tutorial, you will need:

要遵循本教程，您将需要：

• A local machine or development server running Ubuntu 18.04. Your development machine should have a non-root user with administrative privileges and a firewall configured with ufw. For instructions on how to set this up, see our Initial Server Setup with Ubuntu 18.04 tutorial.

  运行Ubuntu 18.04的本地计算机或开发服务器。 您的开发机器应具有具有管理特权的非root用户，以及使用ufw配置的防火墙。 有关如何进行此设置的说明，请参阅我们的《 Ubuntu 18.04初始服务器设置》教程。

• Node.js and npm installed on your local machine or development server. This tutorial uses Node.js version 10.16.3 and npm version 6.9.0. For guidance on installing Node.js and npm on Ubuntu 18.04, follow the instructions in the “Installing Using a PPA” section of How To Install Node.js on Ubuntu 18.04.

  安装在本地计算机或开发服务器上的Node.js和npm 。 本教程使用Node.js 10.16.3版和npm 6.9.0版。 有关在Ubuntu 18.04上安装Node.js和npm的指导，请遵循如何在Ubuntu 18.04上安装Node.js的“使用PPA安装”部分中的说明。

• Ruby, rbenv, and Rails installed on your local machine or development server, following Steps 1-4 in How To Install Ruby on Rails with rbenv on Ubuntu 18.04. This tutorial uses Ruby 2.5.1, rbenv 1.1.2, and Rails 5.2.3.

  遵循在Ubuntu 18.04上如何使用rbenv安装Ruby on Rails的 步骤1-4中的步骤 ，将Ruby， rbenv和Rails安装在本地计算机或开发服务器上 。 本教程使用Ruby 2.5.1 ，rbenv 1.1.2和Rails 5.2.3 。

• SQLite installed, following Step 1 of How To Build a Ruby on Rails Application. This tutorial uses SQLite 3 3.22.0.

  按照如何在Ruby on Rails应用程序中构建Ruby的 步骤1安装SQLite。 本教程使用SQLite 3 3.22.0 。

步骤1 —克隆项目并安装依赖项 (Step 1 — Cloning the Project and Installing Dependencies)

Our first step will be to clone the rails-stimulus repository from the DigitalOcean Community GitHub account. This repository includes the code from the setup described in How To Add Stimulus to a Ruby on Rails Application, which described how to add Stimulus.js to an existing Rails 5 project.

我们的第一步将是从DigitalOcean社区GitHub帐户中克隆rails-stimulus存储库。 该存储库包含如何在Ruby on Rails应用程序中添加Stimulus所描述的设置代码，其中描述了如何将Stimulus.js添加到现有的Rails 5项目中。

Clone the repository into a directory called rails-bootstrap:

将存储库克隆到名为rails-bootstrap的目录中：

Navigate to the rails-bootstrap directory:

导航到rails-bootstrap目录：

In order to work with the project code, you will first need to install the project’s dependencies, which are listed in its Gemfile. Use the following command to install the required gems:

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

Next, you will install your Yarn dependencies. Because this Rails 5 project has been modified to serve assets with webpack, its JavaScript dependencies are now managed by Yarn. This means that it’s necessary to install and verify the dependencies listed in the project’s package.json file.

接下来，您将安装Yarn依赖项。 由于该Rails 5项目已被修改为通过Webpack服务资产，因此其JavaScript依赖项现在由Yarn管理。 这意味着有必要安装并验证项目的package.json文件中列出的依赖项。

Run the following command to install these dependencies:

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

The --check-files flag checks to make sure that any files already installed in the node_modules directory have not been removed.

--check-files标志进行检查以确保尚未删除node_modules目录中已安装的所有文件。

Next, run your database migrations:

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

Once your migrations have finished, you can test the application to ensure that it is working as expected. Start your server with the following command if you are working locally:

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

If you are working on a development server, you can start the application with:

如果您在开发服务器上工作，则可以使用以下命令启动应用程序：

Navigate to localhost:3000 or http://your_server_ip:3000. You will see the following landing page:

导航到localhost:3000或http:// your_server_ip :3000 。 您将看到以下登录页面：

To create a new shark, click on the New Shark link at the bottom of the page, which will take you to the sharks/new route. You will be prompted for a username (sammy) and password (shark), thanks to the project’s authentication settings. The new view looks like this:

要创建新的鲨鱼，请单击页面底部的“ 新建鲨鱼”链接，这将带您进入sharks/new路线。 由于项目的身份验证设置 ，系统将提示您输入用户名( sammy )和密码( shark )。 new视图如下所示：

To verify that the application is working, we can add some demo information to it. Input “Great White” into the Name field and “Scary” into the Facts field:

为了验证该应用程序是否正常运行，我们可以向其中添加一些演示信息。 在“ 名称”字段中输入“ Great White”，在“ 事实”字段中输入“ Scary”：

Click on the Create Shark button to create the shark:

单击创建鲨鱼按钮以创建鲨鱼：

You have now installed the necessary dependencies for your project and tested its functionality. Next, you can make a few changes to the Rails application so that users encounter a main landing page before navigating to the shark information application itself.

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

第2步-添加主登录页面和控制器 (Step 2 — Adding a Main Landing Page and Controller)

The current application sets the root view to the main shark information page, the index view for the sharks controller. While this works to get users to the main application, it may be less desirable if we decide to develop the application in the future and add other capabilities and features. We can reorganize the application to have the root view set to a home controller, which will include an index view. From there, we can link out to other parts of the application.

当前应用程序将根视图设置为鲨鱼主信息页面，即sharks控制器的index视图。 虽然这样做可以吸引用户使用主应用程序，但是如果我们决定将来开发该应用程序并添加其他功能，则可能会不太理想。 我们可以重组的应用程序具有设置为根视图home控制器，其中包括一个index视图。 从那里，我们可以链接到应用程序的其他部分。

To create the home controller, you can use the rails generate command with the controller generator. In this case, we will specify that we want an index view for our main landing page:

要创建home控制器，可以将rails generate命令与controller生成器一起使用。 在这种情况下，我们将指定我们想要主登陆页面的index视图：

With the controller created, you’ll need to modify the root view in the project’s config/routes.rb file — the file that specifies the application’s route declarations — since the root view is currently set to the sharks index view.

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

Open the file:

打开文件：

Find the following line:

找到以下行：

. . . 
root 'sharks#index'
. . .

Change it to the following:

将其更改为以下内容：

. . . 
root 'home#index'
. . .

This will set the home controller’s index view as the root of the application, making it possible to branch off to other parts of the application from there.

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

Save and close the file when you are finished editing.

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

With these changes in place, you are ready to move on to adding Bootstrap to the application.

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

步骤3 —安装Bootstrap并添加自定义样式 (Step 3 — Installing Bootstrap and Adding Custom Styles)

In this step, you will add Bootstrap to your project, along with the tool libraries that it requires to function properly. This will involve importing libraries and plugins into the application’s webpack entry point and environment files. It will also involve creating a custom style sheet in your application’s app/javascript directory, the directory where the project’s JavaScript assets live.

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

First, use yarn to install Bootstrap and its required dependencies:

首先，使用yarn安装Bootstrap及其必需的依赖项：

Many of Bootstrap’s components require JQuery and Popper.js, along with Bootstrap’s own custom plugins, so this command will ensure that you have the libraries you need.

Bootstrap的许多组件都需要JQuery和Popper.js以及Bootstrap自己的自定义插件，因此此命令将确保您拥有所需的库。

Next, open your main webpack configuration file, config/webpack/environment.js with nano or your favorite editor:

接下来，使用nano或您喜欢的编辑器打开您的主要webpack配置文件config/webpack/environment.js ：

Inside the file, add the webpack library, along with a ProvidePlugin that tells Bootstrap how to interpret JQuery and Popper variables.

该文件中，添加的WebPack库，沿着ProvidePlugin告诉引导如何解释jQuery和波普尔变量。

Add the following code to the file:

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

const { environment } = require('@rails/webpacker')
const webpack = require("webpack") 

environment.plugins.append("Provide", new webpack.ProvidePlugin({ 
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))  

module.exports = environment

The ProvidePlugin helps us avoid the multiple import or require statements we would normally use when working with JQuery or Popper modules. With this plugin in place, webpack will automatically load the correct modules and point the named variables to each module’s loaded exports.

ProvidePlugin帮助我们避免在处理JQuery或Popper模块时通常会使用的多次import或require语句。 有了此插件，webpack将自动加载正确的模块，并将命名变量指向每个模块的已加载导出。

Save and close the file when you are finished editing.

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

Next, open your main webpack entry point file, app/javascript/packs/application.js:

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

Inside the file, add the following import statements to import Bootstrap and the custom scss styles file that you will create next:

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

. . . 
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

import "bootstrap"
import "../stylesheets/application"
. . .

Save and close the file when you are finished editing.

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

Next, create a stylesheets directory for your application style sheet:

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

Open the custom styles file:

打开自定义样式文件：

This is an scss file, which uses Sass instead of CSS. Sass, or Syntactically Awesome Style Sheets, is a CSS extension language that lets developers integrate programming logic and conventions like shared variables into styling rules.

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

In the file, add the following statements to import the custom Bootstrap scss styles and Google fonts for the project:

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

@import "~bootstrap/scss/bootstrap";
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

Next, add the following custom variable definitions and styles for the application:

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

. . .
$white: white;
$black: black;

.navbar {
        margin-bottom: 0;
        background: $black;
}
body {
        background: $black;
        color: $white;
        font-family: 'Merriweather', sans-serif;
}
h1,
h2 {
        font-weight: bold;
}
p {
        font-size: 16px;
        color: $white;
}
a:visited {
        color: $black;
}
.jumbotron {
        background: #0048CD;
        color: $white;
        text-align: center;
        p {
                color: $white;
                font-size: 26px;
        }
}
.link {
        color: $white;
}
.btn-primary {
        color: $white;
        border-color: $white;
        margin-bottom: 5px;
}
.btn-sm {
        background-color: $white;
        display: inline-block;
}
img,
video,
audio {
        margin-top: 20px;
        max-width: 80%;
}
caption {

        float: left;
        clear: both;

}

Save and close the file when you are finished editing.

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

You have added Bootstrap to your project, along with some custom styles. Now you can move on to integrating Bootstrap layout conventions and components into your application files.

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

步骤4 —修改应用程序布局 (Step 4 — Modifying the Application Layout)

Our first step in integrating Bootstrap conventions and components into the project will be adding them to the main application layout file. This file sets the elements that will be included with each rendered view template for the application. In this file, we’ll make sure our webpack entry point is defined, while also adding references to a shared navigation headers partial and some logic that will allow us to render a layout for the views associated with the shark application.

将Bootstrap约定和组件集成到项目中的第一步是将它们添加到主应用程序布局文件中。 该文件设置将包含在应用程序的每个渲染视图模板中的元素。 在这个文件中，我们将确保我们的WebPack切入点定义，同时还加入到共享导航标题引用部分和一些逻辑，让我们来呈现与鲨鱼应用程序相关的意见的布局。

First, open app/views/layouts/application.html.erb, your application’s main layout file:

首先，打开app/views/layouts/application.html.erb程序的主布局文件app/views/layouts/application.html.erb ：

Currently, the file looks like this:

当前，文件如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Sharkapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

The code renders things like cross-site request forgery protection parameters and tokens for dynamic forms, a csp-nonce for per-session nonces that allows in-line script tags, and the application’s style sheets and javascript assets. Note that rather than having a javascript_link_tag, our code includes a javascript_pack_tag, which tells Rails to load our main webpack entry point at app/javascript/packs/application.js.

该代码呈现了诸如跨站点请求伪造保护参数和动态表单的令牌 ，每个会话随机数的csp-nonce (允许使用内嵌脚本标签)以及应用程序的样式表和javascript资产之类的东西。 请注意，而不是一个javascript_link_tag ，我们的代码包括javascript_ pack _tag ，它告诉Rails在加载我们主要的WebPack入口点app/javascript/packs/application.js 。

In the <body> of the page, a yield statement tells Rails to insert the content from a view. In this case, because our application root formerly mapped to the index shark view, this would have inserted the content from that view. Now, however, because we have changed the root view, this will insert content from the home controller’s index view.

在页面的<body>中， yield语句告诉Rails从视图中插入内容。 在这种情况下，由于我们的应用程序根目录以前曾映射到index鲨鱼视图，因此这将插入该视图中的内容。 但是，由于我们已经更改了根视图，因此这将插入home控制器的index视图中的内容。

This raises a couple of questions: Do we want the home view for the application to be the same as what users see when they view the shark application? And if we want these views to be somewhat different, how do we implement that?

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

The first step will be deciding what should be replicated across all application views. We can leave everything included under the <header> in place, since it is primarily tags and metadata that we want to be present on all application pages. Within this section, however, we can also add a few things that will customize all of our application views.

第一步将是确定应在所有应用程序视图之间复制的内容。 我们可以将<header>下包含的所有内容保留在原处，因为主要是我们希望在所有应用程序页面上显示的标签和元数据。 但是，在本部分中，我们还可以添加一些东西来定制所有应用程序视图。

First, add the viewport meta tag that Bootstrap recommends for responsive behaviors:

首先，添加Bootstrap建议用于响应行为的viewport元标记：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sharkapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

Next, replace the existing title code with code that will render the application title in a more dynamic way:

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

Add a <meta> tag to include a description of the site:

添加<meta>标记以包含站点的描述：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "About Sharks" %>">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

With this code in place, you can add a navigation partial to the layout. Ideally, each of our application’s pages should include a navbar component at the top of the page, so that users can easily navigate from one part of the site to another.

使用此代码后，您可以将导航部分添加到布局中。 理想情况下，我们应用程序的每个页面都应在页面顶部包含一个导航栏组件，以便用户可以轻松地从站点的一部分导航到另一部分。

Under the <body> tag, add a <header> tag and the following render statement:

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

<body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>

    <%= yield %>
. . .

This <header> tag allows you to organize your page content, separating the navbar from the main page contents.

该<header>标记允许您组织页面内容，将导航栏与主页内容分开。

Finally, you can add a <main> element tag and some logic to control which view, and thus which layout, the application will render. This code uses the content_for method to reference a content identifier that we will associate with our sharks layout in the next step.

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

Replace the existing yield statement with the following content:

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

. . . 
  <body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>
    <main role="main">
    <%= content_for?(:content) ? yield(:content) : yield %>
    </main>
  </body>
</html>

Now, if the :content block is set, the application will yield the associated layout. Otherwise, thanks to the ternary operator, it will do an implicit yield of the view associated with the home controller.

现在，如果设置了:content块，则应用程序将产生关联的布局。 否则，由于使用了三元运算符，它将隐式产生与home控制器关联的视图。

Once you have made these changes, save and close the file.

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

With the application-wide layout set, you can move on to creating the shared navbar partial and the sharks layout for your shark views.

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

步骤5 —创建共享的部分布局和特定布局 (Step 5 — Creating the Shared Partial and Specific Layouts)

In addition to the changes you made to the application layout in the previous Step, you will want to create the shared navbar partial, the sharks layout that you referenced in app/views/layouts/application.html.erb, and a view for the application landing page. You can also add Bootstrap styles to your application’s current link_to elements in order to take advantage of built-in Bootstrap styles.

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

First, open a file for the shared navbar partial:

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

Add the following code to the file to create the navbar:

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

<nav class="navbar navbar-dark navbar-static-top navbar-expand-md">
    <div class="container">
        <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>
        </button> <%= link_to "Everything Sharks", root_path, class: 'navbar-brand' %>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav mr-auto">
            <li class='nav-item'><%= link_to 'Home', home_index_path, class: 'nav-link' %></li>
            <li class='nav-item'><%= link_to 'Sharks', sharks_path, class: 'nav-link' %></li>  

                </li>
            </ul>
        </div>
    </div>
</nav>

This navbar creates a link for the application root using the link_to method, which maps to the application root path. The navbar also includes two additional links: one to the Home path, which maps to the home controller’s index view, and another to the shark application path, which maps to the shark index view.

该导航栏使用link_to方法为应用程序根目录创建链接，该方法映射到应用程序根目录路径。 导航栏还包括两个附加链接：一个链接到Home路径，它映射到home控制器的index视图，另一个链接到shark应用程序路径，它映射到shark index视图。

Save and close the file when you are finished editing.

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

Next, open a file in the layouts directory for the sharks layout:

接下来，在layouts目录中为鲨鱼布局打开一个文件：

Before adding layout features, we will need to ensure that the content of the layout is set as the :content block that we reference in the main application layout. Add the following lines to the file to create the block:

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

<% content_for :content do %>
<% end %>

The code we’re about to write in this block will be rendered inside the :content block in the app/views/layouts/application.html.erb file whenever a sharks view is requested by a controller.

每当控制器请求鲨鱼视图时，我们将在此块中编写的代码将呈现在app/views/layouts/application.html.erb文件中的:content块内。

Next, inside the block itself, add the following code to create a jumbotron component and two containers:

接下来，在块本身内部，添加以下代码以创建巨型组件和两个容器 ：

<% content_for :content do %>
    <div class="jumbotron text-center">
        <h1>Shark Info</h1>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <p>
                    <%= yield %>
                </p>
            </div>
            <div class="col-lg-6">
                <p>

                    <div class="caption">You can always count on some sharks to be friendly and welcoming!</div>
                    <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
                </p>

            </div>
        </div>
    </div>
    <% end %>

The first container includes a yield statement that will insert the content from the shark controller’s views, while the second includes a reminder that certain sharks are always friendly and welcoming.

第一个容器包含一个yield语句，该语句将从shark控制器的视图中插入内容，而第二个容器则提醒您某些鲨鱼总是友好友好的。

Finally, at the bottom of the file, add the following render statement to render the application layout:

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

. . . 
            </div>
        </div>
    </div>
    <% end %>
        <%= render template: "layouts/application" %>

This sharks layout will provide the content for the named :content block in the main application layout; it will then render the application layout itself to ensure that our rendered application pages have everything we want at the application-wide level.

这个鲨鱼布局将在主应用程序布局中提供名为:content块的:content ； 然后它将呈现应用程序布局本身，以确保我们呈现的应用程序页面在应用程序范围内具有我们想要的一切。

Save and close the file when you are finished editing.

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

We now have our partials and layouts in place, but we haven’t yet created the view that users will see when they navigate to the application home page, the home controller’s index view.

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

Open that file now:

立即打开该文件：

The structure of this view will match the layout we defined for shark views, with a main jumbotron component and two containers. Replace the boilerplate code in the file with the following:

该视图的结构将与我们为鲨鱼视图定义的布局相匹配，具有一个大型巨型组件和两个容器。 用以下内容替换文件中的样板代码：

<div class="jumbotron">
    <div class="container">
        <h1>Want to Learn About Sharks?</h1>
        <p>Are you ready to learn about sharks?</p>
        <br>
        <p>
            <%= button_to 'Get Shark Info', sharks_path, :method => :get,  :class => "btn btn-primary btn-lg"%>
        </p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <h3>Not all sharks are alike</h3>
            <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.
            </p>
        </div>
        <div class="col-lg-6">
            <h3>Sharks are ancient</h3>
            <p>There is evidence to suggest that sharks lived up to 400 million years ago.
            </p>
        </div>
    </div>
</div>

Now, when landing on the home page of the application, users will have a clear way to navigate to the shark section of the application, by clicking on the Get Shark Info button. This button points to the shark_path — the helper that maps to the routes associated with the sharks controller.

现在，当登陆到应用程序的主页上时，用户将可以通过单击“ 获取鲨鱼信息”按钮来使用一种清晰的方法来导航到应用程序的“鲨鱼”部分。 此按钮指向shark_path —映射到与sharks控制器关联的路线的帮助程序。

Save and close the file when you are finished editing.

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

Our last task will be to transform some of the link_to methods in our application into buttons that we can style using Bootstrap. We will also add a way to navigate back to the home page from the sharks index view.

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

Open the sharks index view to start:

打开鲨鱼index视图开始：

At the bottom of the file, locate the link_to method that directs to the new shark view:

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

. . .
<%= link_to 'New Shark', new_shark_path %>

Modify the code to turn this link into a button that uses Bootstrap’s "btn btn-primary btn-sm" class:

修改代码以将此链接变成使用Bootstrap的"btn btn-primary btn-sm"类的按钮：

. . .
<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %>

Next, add a link to the application home page:

接下来，添加到应用程序主页的链接：

. . .
<%= 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" %>

Save and close the file when you are finished editing.

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

Next, open the new view:

接下来，打开new视图：

Add the button styles to the link_to method at the bottom of the file:

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

. . . 
<%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

Save and close the file.

保存并关闭文件。

Open the edit view:

打开edit视图：

Currently, the link_to methods are arranged like this:

当前， link_to方法的排列方式如下：

. . . 
<%= link_to 'Show', @shark %> |
<%= link_to 'Back', sharks_path %>

Change their arrangement on the page and add the button styles, so that the code looks like this:

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

. . . 
<%= link_to 'Show', @shark, :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

Save and close the file.

保存并关闭文件。

Finally, open the show view:

最后，打开show视图：

Find the following link_to methods:

查找以下link_to方法：

. . . 
<%= link_to 'Edit', edit_shark_path(@shark) %> |
<%= link_to 'Back', sharks_path %>
. . .

Change them to look like this:

将它们更改为如下所示：

. . . 
<%= link_to 'Edit', edit_shark_path(@shark), :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>
. . .

Save and close the file.

保存并关闭文件。

You are now ready to test the application.

现在您可以测试应用程序了。

Start your server with the appropriate command:

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

• rails s if you are working locally

  如果您在本地工作，请使用rails s

• rails s --binding=your_server_ip if you are working with a development server

  rails s --binding= your_server_ip如果正在使用开发服务器)

Navigate to localhost:3000 or http://your_server_ip:3000, depending on whether you are working locally or on a server. You will see the following landing page:

导航到localhost:3000或http:// your_server_ip :3000 ，具体取决于您是在本地还是在服务器上工作。 您将看到以下登录页面：

Click on Get Shark Info. You will see the following page:

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

You can now edit your shark, or add facts and posts, using the methods described in How To Add Stimulus to a Ruby on Rails Application. You can also add new sharks to the conversation.

现在，您可以使用如何向Ruby on Rails应用程序添加刺激中描述的方法来编辑鲨鱼，或添加事实和信息。 您还可以将新的鲨鱼添加到对话中。

As you navigate to other shark views, you will see that the shark layout is always included:

导航到其他鲨鱼视图时，您将看到始终包含鲨鱼布局：

You now have Bootstrap integrated into your Rails application. From here, you can move forward by adding new styles and components to your application to make it more appealing to users.

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

结论 (Conclusion)

You now have Bootstrap integrated into your Rails application, which will allow you to create responsive and visually appealing styles to enhance your users’ experience of the project.

现在，您已将Bootstrap集成到Rails应用程序中，这将使您可以创建响应式和视觉吸引人的样式，以增强用户对项目的体验。

To learn more about Bootstrap features and what they offer, please see the Bootstrap documentation. You can also look at the documentation for Sass, to get a sense of how you can use it to enhance and extend your CSS styles and logic.

要了解有关Bootstrap功能及其所提供功能的更多信息，请参阅Bootstrap文档 。 您还可以查看Sass的文档 ，以了解如何使用它来增强和扩展CSS样式和逻辑。

If you are interested in seeing how Bootstrap integrates with other frameworks, please see How To Build a Weather App with Angular, Bootstrap, and the APIXU API. You can also learn about how it integrates with Rails and React by reading How To Set Up a Ruby on Rails Project with a React Frontend.

如果您想了解Bootstrap如何与其他框架集成，请参阅如何使用Angular，Bootstrap和APIXU API构建Weather App 。 您还可以通过阅读如何使用React Frontend设置Ruby on Rails项目来了解它如何与Rails和React集成。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-add-bootstrap-to-a-ruby-on-rails-application

bootstrap 小程序