文章/答案/技术大牛

发布

社区首页 >问答首页 >用rails应用程序安装引导程序的最佳方法是什么？

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

Stack Overflow用户

提问于 2017-03-04 14:19:50

回答 7查看 15.6K关注 0票数 13

我是rails的新手，所以我想问一下如何在rails中使用引导程序？在学习后端开发之前，我常常简单地在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，因为它已经实现了)？

因为如果是这么简单的话，为什么人们会为鞋带做特殊的宝石呢？

我很确定有很多地方我错过或不知道，所以我希望得到一些澄清和指导。

PS: rails应用已经存在了，我只想用引导来调整设计。

ruby-on-rails

twitter-bootstrap

回答 7

Stack Overflow用户

回答已采纳

发布于 2017-03-04 16:26:50

为什么要安装引导创业板？

由于rails使用资产管道缩小和压缩样式表、javascripts和图像，因此在应用程序布局视图中使用sass版本的引导是将引导包含在引导之上的首选方法。此外，如果您只是在头文件中包含了引导程序，那么包含的文件必须是引导的编译版本(它只是一个css文件)。但是，由于我们将在您的应用程序中包含sass版本的引导程序，所以您可以访问引导程序的sass变量、mixins和其他与sass相关的awesomeness。您无法通过在应用程序布局视图中包含已编译的资产来获得该功能。通过在您的application.scss文件中导入sass，rails将动态编译您的引导程序和资产，并将使您在应用程序的设计上具有更大的灵活性。

将引导程序添加到rails应用程序中

根据自举-sass宝石，您需要添加

'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 .

票数 14

Stack Overflow用户

发布于 2018-05-19 06:08:24

现在，在@import 'bootstrap';引导4中，您可以简单地将您的添加到您的application.scss.中如果尚未将application.css重命名为application.scss，则应将其重命名为application.scss。

@import 'bootstrap';

在将宝石添加到Gem file之后

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

使用Sass版本的Advantage是

可以将默认引导变量更改为自己的自定义变量。
您可以编写自己的函数并进行混合，而无需重新编译和担心更新/修复。

票数 5

Stack Overflow用户

发布于 2020-01-28 20:51:31

rails new bootstrappy

cd bootstrappy

yarn add bootstrap jquery popper.js

在environment.js中

config/webpack/environment.js

增加以下内容：

const webpack = require("webpack")

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

在application.js中

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

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

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

在stylesheets中创建app/javascript文件夹

mkdir app/javascript/stylesheets

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

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

@import "~bootstrap/scss/bootstrap";

更新：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>

试一试：

将肚脐、工具提示、波波夫添加到：

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

请按照以下链接操作：

http://localhost:3000/，享受吧！

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42597050

复制

相似问题

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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