堆栈内存溢出
  繁体   English   中英

使用 rails 应用程序安装引导程序的最佳方法是什么？

[英]What is the best way to install bootstrap with rails app?

 原文  2017-03-04 14:19:50  6   7    ruby-on-rails/ twitter-bootstrap

问题描述

我是 Rails 的新手，所以我想问一下如何在 Rails 中使用 bootstrap？ 在学习后端开发之前，我曾经简单地在 html 文件的 html 标签的头部调用它，如下所示：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

所以我想知道在 Rails 中做这件事的正确方法是什么？ 我应该做同样的事情并将这些调用放在应用程序布局视图文件的 html 标签的头部（jQuery 除外，因为它已经实现了）？

因为如果就这么简单，那为什么人们要为 bootstrap 制作特殊的 gem 呢？

我很确定有很多点我遗漏或不知道，所以我希望得到一些澄清和指导。

PS：rails应用已经存在，我只是想用bootstrap来调整设计..

7 个解决方案

解决方案1
 13 已采纳  2017-03-04 16:26:50

为什么要安装 bootstrap gem？

由于 rails 使用资产管道来缩小和压缩样式表、javascripts 和图像，因此使用 sass 版本的引导程序是包含引导程序的首选方式，而不是简单地在应用程序布局视图中包含引导程序。 此外，如果您只是在头文件中包含引导程序，则该包含的文件必须是引导程序的编译版本（它只是一个 css 文件）。 但是，由于我们将在您的应用程序中包含 bootstrap 的 sass 版本，您将可以访问 bootstrap 的 sass 变量、mixin 和其他与 sass 相关的精彩内容。 您无法通过在应用程序布局视图中包含已编译的资产来获得该功能。 通过在 application.scss 文件中导入 sass，rails 将动态编译引导程序和资产，并为您的应用程序设计提供更大的灵活性。

将 Bootstrap 添加到 Rails 应用程序

根据bootstrap-sass gem ，您需要添加

'gem 'bootstrap-sass'

到你的 Gemfile 然后运行

bundle install

接下来，您需要在应用程序 css 清单文件中导入引导程序样式表。 但是，默认情况下，清单文件命名为：

app/assets/stylesheets/application.css

但您应该将其重命名为使用 .scss 扩展名（或 .sass 扩展名），如下所示：

app/assets/stylesheets/application.scss

现在，删除 application.scss 文件中的所有内容并添加以下两行：

@import "bootstrap-sprockets";
@import "bootstrap";

从现在开始，您将需要手动处理 scss 文件的导入。

接下来，要使引导程序的 javascript 助手可用，您需要添加以下行：

//= require bootstrap-sprockets

给你的

app/assets/javascripts/application.js

您需要添加该行，使您的 application.js 文件如下所示：

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory,   lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

解决方案2
 5  2018-05-19 06:08:24

现在在Bootstrap 4 中，您只需添加@import 'bootstrap'; 到您的application.scss 。 您应该将重命名application.css到application.scss如果您还没有。

@import 'bootstrap';

将 gem 添加到Gem file

...
# Bootstrap
gem 'bootstrap', '~> 4.1.1'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
...

使用 Sass 版本的优点是

  1. 您可以将默认引导程序变量更改为您自己的自定义变量
  2. 而且您可以编写自己的函数和混合，而无需重新编译和担心 Bootstrap 的更新/修复。

解决方案3
 5  2020-01-28 20:51:31

1.

rails new bootstrappy

2.

cd bootstrappy

3.

yarn add bootstrap jquery popper.js

4.

在environment.js

config/webpack/environment.js

添加以下内容：

const webpack = require("webpack")

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

5.

在application.js

位置： app/javascript/packs/application.js添加：

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

document.addEventListener("turbolinks:load", () => {
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()
})

6.

在app/javascript创建stylesheets文件夹

mkdir app/javascript/stylesheets

在stylesheets文件夹中创建文件： application.scss

7.

在app/javascript/stylesheets/application.scss添加：

@import "~bootstrap/scss/bootstrap";

8.更新： app/views/layouts/application.html.erb

添加：

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

application.html.erb看起来像这样：

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

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

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

9. 测试一下：

将navbar 、 tooltips 、 popover添加到：

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrappy</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 
    'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 
    'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>   

  <!-- add navbar -->

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
      target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- 
      expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
            role="button" 
            data-toggle="  dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria- 
            disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria- 
          label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" 
          type="submit">Search</button>
      </form>
    </div>
  </nav>

  <!-- add tooltips -->

  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="top" title="Tooltip on top">
    Tooltip on top
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="right" title="Tooltip on right">
    Tooltip on right
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="left" title="Tooltip on left">
    Tooltip on left
  </button>

  <!-- add popover -->

  <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" 
    title="Popover title"   data-content="And here's some amazing content. It's very 
    engaging. Right?">Click to toggle popover</button>
  <%= yield %>
  </body>
</html>

10.

rails g controller main index

11.

更新app/config/routes.rb

像这样：

Rails.application.routes.draw do
  root to: 'main#index'
end

12.

运行start rails server

13.点击这个链接：

http://localhost:3000/尽情享受吧！

解决方案4
 3  2017-03-04 22:36:38

引入bootstrap-sass gem 或使用 NPM 包的一个主要原因是，您可以配置、覆盖和使用 Bootstrap 的 Sass 变量和混合。 当您从 CDN 拉入时，您将获得预编译和缩小的 CSS，因此您要覆盖的任何样式都必须直接在要修改的元素上完成，而使用变量将允许您一致地修改样式所有引导组件通过覆盖它们的变量，您还可以使用它们可用的各种混合。

如果您只想使用常规引导程序默认设置启动和运行，CDN 可能非常方便。 使用 CDN 版本的站点越多，用户就越有可能已经下载了该资产并且不需要为您的站点再次请求它。

但是，还有一些反对 CDN 的观点：

1) 您无法控制 CDN，因此如果他们出现中断或某种错误，您就有点不走运了。 您通常需要某种 CDN 以某种方式前置您的资产，但拥有一个您可以对其进行配置控制的 CDN 会很好，这样您就可以执行诸如手动清除缓存或禁用调试等操作。

2) 与 gem 或 NPM 包相比，当您使用 CDN 时，功能测试会更慢，因为它们最终还必须下载资产。 这也可能导致不稳定的测试，这是我们在使用 CDN 资产时在 CI 上特别注意到的。

我们boostrap-sass从boostrap-sass gem 切换到 NPM 包。 它的工作原理与config/initializers/assets.rb的描述或其说明大致相同，但我们必须将包的路径添加到我们的config/initializers/assets.rb文件中：

# config/initializers/assets.rb
Rails.application.config.assets.paths += [
  # paths for CSS assets in node_modules directory
  Rails.root.join('node_modules', 'bootstrap-sass', 'assets', 'stylesheets')
]

解决方案5
 0  2017-03-04 14:39:57

向 rails 应用程序添加扩展的常用方法是将它们包含在Gemfile

这是所有库所在的地方，它是版本控制的，在引导程序等情况下，资产将由 rails 资产管道处理

这里是 boostrap gem 的网站： https : //github.com/twbs/bootstrap-sass

解决方案6
 0  2020-09-28 20:22:46

在使用Webpacke r 和Yarn作为默认选项的Rails 6 中，我基本上按照这个不错的writeup安装了没有 gem 的引导程序。 从依赖安装开始：

yarn add bootstrap jquery popper.js

将依赖添加到我的app/javascript/packs/application.js ：

require("bootstrap")

我将app/assets/stylesheets/application.css更改为.scss 。 （改为使用自定义文件。）我删除了所有*= require_行并添加：

@import "bootstrap/scss/bootstrap";

就是这样。 重新启动服务器允许我添加一个容器和一个带有下拉菜单的导航栏到我的布局。

解决方案7
 0  2020-10-22 16:45:11

第 1 步：使用纱线：

yarn add bootstrap@4.3.1 jquery popper.js

package.json 文件应该是这样的

"dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },

第 2 步：前往 config/webpack/environment.js 文件并添加这些行

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

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

第 3 步：前往 app/assets/stylesheets/application.css 并添加这些行

*= require bootstrap

*= require_tree .

*= require_self

恭喜！ 您已成功安装 Bootstrap 4

复制自https://dev.to/somnathpaul/add-bootstrap-4-to-your-ruby-on-rails-6-application-ole

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 测试rails应用程序的最佳方法是什么？ 在Rails应用程序中实现蒙皮的最佳方法是什么 在 Rails 4 应用程序中显示位置的最佳方式是什么？ 使用edge生成Rails应用程序的最佳方法是什么？ 备份Rails应用程序数据的最佳方法是什么？ 在Rails应用程序中进行图像上传和裁剪的最佳方法是什么？ 在rails中存储应用程序特定配置的最佳方法是什么？ 在Rails 4应用程序中重用条件逻辑的最佳方法是什么？ 在Rails应用程序中进行自然语言处理的最佳方法是什么？ 使用Postmarkapp在Rails应用程序中处理电子邮件异常的最佳方法是什么？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM