简体   繁体   English

如何在导轨上配置Bootstrap-Sass

[英]How to configure bootstrap-sass on rails

I'm building a Rails application and I decided to use bootstrap and sass. 我正在构建一个Rails应用程序,因此决定使用bootstrap和sass。

I follow the guide on the github page: 我遵循github页面上的指南:

https://github.com/twbs/bootstrap-sass

So, now i have my gem installed ('bootstrap-sass', 'sass-rails'), my application.css (now application.sass) looks like this: 所以,现在我安装了我的gem('bootstrap-sass','sass-rails'),我的application.css(现在为application.sass)如下所示:

1 @import "bootstrap-sprockets";
2 @import "bootstrap";

My application.js file looks like this: 我的application.js文件如下所示:

1 // This is a manifest file that'll be compiled into application.js, which will include all the files
2 // listed below.
3 //
4 // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5 // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
6 //
7 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8 // compiled file.
9 //
10 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
11 // about supported directives.
12 //
13 //= require jquery
14 //= require jquery_ujs
15 //= require turbolinks
16 //= require bootstrap-sprockets
17 //= require_tree .

And then the guide pretty much ends. 然后指南几乎结束了。 The problem is that I don't have bootstrap in my application(I can't see it anywhere in the page by viewing the source) and I do not know how to use sass. 问题是我的应用程序中没有引导程序(通过查看源代码无法在页面的任何位置看到它),而且我不知道如何使用sass。 What should I do next? 接下来我该怎么办? Did I miss something? 我错过了什么?

It sounds like it should all be ready to go but you will have to start writing some code that it can apply. 听起来应该已经准备就绪,但是您必须开始编写一些可以应用的代码。 Perhaps test it with this. 也许对此进行测试。 In your application.html.erb file under body put the following: 在body下的application.html.erb文件中,放入以下内容:

<div id="container">
    <div class="main">
            <h1>Main Content</h1>
    </div>

then in the css file try this 然后在css文件中尝试这个

#container {
    .main {
            width:600px;
            h1 {
                    color: $red;
            }
    }

Make sure you have restarted your server after the bundle install. 确保在安装捆绑软件后重新启动服务器。 The list of bootstrap variables can be found here http://getbootstrap.com/customize/#less-variables 引导程序变量列表可以在以下位置找到: http://getbootstrap.com/customize/#less-variables

I found the error: I wrote all the import tag between the html 我发现了错误:我在html之间写了所有import标签

<title>

tag instead of the 标签而不是

<head> 

tag. 标签。

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

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM