简体   繁体   English

在我的Rails应用程序中使用Twitter Bootstrap,缺少标记

[英]Using Twitter Bootstrap in my Rails app, missing markup

I installed twitter-bootstrap-rails gem with less support by adding the following in my Gemfile: 我通过在我的Gemfile中添加以下内容来安装twitter-bootstrap-rails gem,但支持较少:

  gem 'therubyracer'
  gem 'less-rails'
  gem 'twitter-bootstrap-rails'

After running a bundle install, I went ahead and ran the generator: 运行捆绑安装后,我继续运行生成器:

rails generate bootstrap:install static

My application.css in app/assets/stylesheets/ has the following in it: app / assets / stylesheets /中的application.css包含以下内容:

 *= require_self
 *= require_tree .

If I view source, I do see the following there: 如果我查看源代码,我会看到以下内容:

<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />

So that's there. 那就是那里。 Then I started playing with the Grid system and added the markup show-grid and noticed there's no style for it. 然后我开始玩Grid系统并添加了标记show-grid并注意到它没有样式。 I proceeded to add the following in my bootstrap_and_override.css.less file: 我继续在bootstrap_and_override.css.less文件中添加以下内容:

@import "twitter/bootstrap/reset.less";
@import "twitter/bootstrap/variables.less";
@import "twitter/bootstrap/mixins.less";
@import "twitter/bootstrap/scaffolding.less";
@import "twitter/bootstrap/grid.less";
@import "twitter/bootstrap/layouts.less";
@import "twitter/bootstrap/type.less";
@import "twitter/bootstrap/forms.less";
@import "twitter/bootstrap/wells.less";
@import "twitter/bootstrap/component-animations.less";
@import "twitter/bootstrap/buttons.less";
@import "twitter/bootstrap/close.less";
@import "twitter/bootstrap/navs.less";
@import "twitter/bootstrap/navbar.less";
@import "twitter/bootstrap/labels-badges.less";
@import "twitter/bootstrap/hero-unit.less";
@import "twitter/bootstrap/utilities.less";
@import "twitter/bootstrap/responsive";

After adding these, I started the local Rails server up and still don't see the markup in the application. 添加这些后,我启动了本地Rails服务器,仍然没有在应用程序中看到标记。 Must be doing something wrong here. 这里一定是做错了。 Does application.css need to be renamed application.css.less? application.css是否需要重命名为application.css.less? Do I need to recompile something? 我需要重新编译一些东西吗? I'm guessing show-grid styling is on one of the imports below (probably grid.less), and I'm guessing that something I'm doing incorrectly is not importing those stylesheets. 我猜测show-grid样式是在下面的一个导入(可能是grid.less),我猜我正在做的事情不是导入那些样式表。

Where's a good step to begin troubleshooting this? 哪个是开始排除故障的好方法?

The Bootstrap show-grid class comes from the docs.css that Bootstrap use on their own demo site. Bootstrap show-grid类来自bootstrap在他们自己的演示站点上使用的docs.css。

I don't think it's really meant to be used by folk who download Bootstrap but I guess there's nothing stopping you using it. 我不认为下载Bootstrap的人会使用它,但我想没有什么可以阻止你使用它。

The css is in this file: css在这个文件中:

http://twitter.github.com/bootstrap/assets/css/docs.css http://twitter.github.com/bootstrap/assets/css/docs.css

And it's used here on Bootstrap: 它在Bootstrap中使用:

http://twitter.github.com/bootstrap/scaffolding.html http://twitter.github.com/bootstrap/scaffolding.html

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

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