Tag: bootstrap sass

如何在rails app中使用twitter bootstrap和bootstrap-sass?

我对此很新,但我无法弄清楚问题。 在twitter bootstrap中我会使用: Column1 Column2 一切正常。 但我不想直接将spanX和spanY写入我的html文件,而是想提供有意义的类名,例如: First Column Second Column 鉴于事实,我正在使用https://github.com/thomas-mcdonald/bootstrap-sass ,我该如何编写我的scss文件? 我尝试了以下,但它不起作用(不显示两列): @import “bootstrap”; @import “bootstrap-responsive”; .user-container { @extend .row-fluid; } .user-filter { @extend .span2; } .user-list { @extend .span10; } 如果我看一下生成的代码,在我看来一切都应该没问题: /* line 164, ../../../../../.rvm/gems/ruby-1.9.3-p125/gems/bootstrap-sass-2.0.0/vendor/assets/stylesheets/bootstrap/_mixins.scss */ .span2, .user-filter { width: 140px; } 等等。 我究竟做错了什么? 更新: 好吧,只是为了清楚是什么问题 – 列被列为行(一个接一个),而不是真正的列(彼此相邻),例如: with bootstrap:Column1 Column2 使用我的自定义类: […]

运行rake资产:在bootstrap gem版本之间来回切换时进行预编译?

使用bootstrap-sass gem开始使用Bootstrap 2.3开始的项目,在我的gemfile中指定版本2.3.1.0。 我想将它更新为Bootstrap 3。 这是使用bootstrap-sass gem version 2.3.1.0的应用程序的样子: 我检查了一个分支,试验将样式更新为Bootstrap 3,所以我更新了我的gemfile以使用最新版本的bootstrap-sass gem,运行bundle update并安装。 我在上面看到的每个“神奇点”div元素上都有bootstrap 3版本类,所以英雄单元中的样式应该消失,按钮应该变平,并且惊人的点应该跨越4列“col-lg” -4“我已经指定了。 但是当我启动rails服务器时,我得到了Bootstrap 2.3和3的混合: “col-lg-4”类应用于Amazing Points,但登录和注册按钮仍然看起来像Bootstrap 2.3按钮! “登录”和“注册”文本中有一个微妙但可见的变化 – 它更加大胆。 这就像我有一些奇怪的Bootstrap 2.3和3的混合。 但现在我运行rake资产:预编译,这就是我得到的: 现在事情正确显示。 但为什么我总是要运行rake资产:预编译以使其正常工作? 当我在gem文件之间切换时,我怎么能把它自动更新? 以下是其他相关文件: application.css: /* * This is a manifest file that’ll be compiled into application.css, which will include all the files * listed below. * * […]

在资产管道中编辑我的SASS样式表似乎打破了资产管道

这让我疯了 – 我有一个基于Bootstrap的Rails应用程序。 我已经连续几周了,今天我遇到了一个非常奇怪的问题。 如果我对任何样式表进行任何微不足道的更改(即添加新行并保存),我会松散一堆CSS格式。 如果没有一些如何发布我的所有代码等,这很难解释。最大的症状是丢失了我的Google字体。 这是我的application.css.scss文件的顶部: @import “font-awesome-sprockets”; @import “font-awesome”; @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700); /*** BOOTSTRAP ***/ /* Needs to load first to overide the default CSS */ @import “bootstrap_custom”; @import “bootstrap-sprockets”; @import “bootstrap”; @import “timeline”; 在此之后我还有一些自定义CSS。 字体真棒和bootstrap CSS似乎仍然加载。 似乎消失的CSS代码是bootstrap_custom。 这是我的导航栏我有谷歌字体和一些自定义CSS的地方。 重新启动rails服务器无法修复它。 替换已编辑的css文件不起作用。 我真的必须恢复整个app目录的旧版本。 如果我用终端或TextMate更改文件并不重要 – 结果相同。 如果重要的话,我在OS X 10.10.1上运行Rails 4.1.8。 我必须hame配置错误或有一些奇怪的Rails服务器缓存或设置我在这里丢失。 我必须恢复整个app目录的事实会让我相信这一点。 UPDATE 我认为这是一个SASS或Bootstrap-sass问题。 我通过在线文件比较网站从两个版本运行CSS。 […]

试图通过heroku上的bootstrap-sass导入bootstrap但是收到错误

我有一个rails应用程序,我正在尝试使用bootstrap-sass在heroku上导入bootstrap,遵循以下指示: https : //github.com/thomas-mcdonald/bootstrap-sass 在我的application.css中,我有: @import “bootstrap”; /* * This is a manifest file that’ll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. […]

Bootstrap Sass Rails 4自定义样式

我正在尝试使用bootstrap定制我的rails应用程序的样式。 此处提供较少的变量 。 我正在使用引导程序Sass ,我在我的/vendor/assets包含了所有javascript css和字体。 我一字不漏地跟着Erik Minkel教程,或者我应该说代码代码。 在assets/javascript/application.js //= require jquery //= require jquery.countdown //= require bootstrap //= require jquery_ujs //= require tinymce-jquery //= require jquery.turbolinks //= require turbolinks //= require masonry/jquery.masonry //= require_tree . 并在assets/stylesheets/application.css *= require_tree . *= require ‘masonry/transitions’ *= require jquery.countdown *= require bootstrap *= require_self */ 为了自定义,我在assets/stylesheet/创建了一个bootstrap_and_customization.css.scss文件,如下所示: @import url(http://fonts.googleapis.com/css?family=Lato:400,700); […]

升级到bootstrap-sass 3.2.0的问题

将bootstrap-sass gem升级到~> 3.2.0时是否需要引用/配置其他东西? 使用RubyMine 6.3作为编辑器和Gemfile中的以下内容: ruby ‘2.1.2’ gem ‘rails’, ‘4.1.1’ gem ‘sass-rails’, ‘~> 4.0.3’ gem ‘bootstrap-sass’, ‘3.1.1.1’ app / assets / stylesheets / application.css.scss很满意 @import ‘bootstrap’; 但是 ,一旦bootstrap-sass gem通过将Gemfile引用更改为(然后运行bundle update)而升级到其当前版本: gem ‘bootstrap-sass’, ‘~> 3.2.0’ RubyMine现在发布了@ @import ‘bootstrap’; 声明,说“无法解析导入到sass / scss文件” 。 twbs / bootstrap-sass安装文档似乎没有推断出还需要其他任何东西……

Bootstrap3和简单的forms

以下命令将simple_form与twitter-bootstrap集成在一起 $ rails g simple_form:install –bootstrap identical config/initializers/simple_form.rb create config/initializers/simple_form_bootstrap.rb exist config/locales identical config/locales/simple_form.en.yml identical lib/templates/erb/scaffold/_form.html.erb =============================================================================== Be sure to have a copy of the Bootstrap stylesheet available on your application, you can get it on http://twitter.github.com/bootstrap. Inside your views, use the ‘simple_form_for’ with one of the Bootstrap form classes, ‘.form-horizontal’, ‘.form-inline’, ‘.form-search’ or ‘.form-vertical’, […]

Rails Bootstrap如何格式化form_for(宽度网格折叠)

我正在尝试用bootstrap-sass创建一个表单。 我需要找到引导类的最佳配置,使其看起来不错。 它没有以我期望的方式显示,特别是当浏览器宽度小于特定大小时,标签和表单字段之间的空格会崩溃,并且它看起来不再好看。 如果它只发生在小宽度上就可以了,但事实并非如此。 我真的很感激这方面的一些帮助,真的,用bootstrap格式化form-horizontal的最佳方法是什么? 这是我的代码: true, class: “col-md-4 control-label” %> “yes” %> false, class: “col-md-4 control-label” %> “no” %> 从注释掉的代码中可以看出,我首先使用了form-group类,但它运行不正常。 同样,问题是当浏览器的宽度小于特定大小时,标签和文本字段之间的空格会崩溃。 右对齐的标签会失去对齐。 浏览器必须几乎全屏才能正确显示,这是不对的,因为它有足够的空间可以在较小的宽度上正确显示。 我正在关注本指南http://getbootstrap.com/css/#grid 编辑 :在代码中添加了电子邮件字段,因为它的大小不同,更容易看到问题。

Rails 5.1.2引导程序图标未在生产中提供

这是一个很棒的地方。 我希望很快能够胜任,提供解决方案。 请有人帮忙!!?! 我已经看了几个小时的youtube并阅读了关于网上资产管道预编译的每篇文章。 无论出于何种原因,我决定使用Rails 5.1.2,我不知道这是不是问题。 glyphicons不会在Heroku上渲染或使用 rails s -e production 在我当地的ubuntu上。 我打字 rake assets:precompile RAILS_ENV=production 得到 I, [2018-01-01T16:05:07.261287 #4745] INFO — : Writing /home/dracos/rails/video-store/public/assets/glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf I, [2018-01-01T16:05:07.261968 #4745] INFO — : Writing /home/dracos/rails/video-store/public/assets/glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf.gz I, [2018-01-01T16:05:07.263049 #4745] INFO — : Writing /home/dracos/rails/video-store/public/assets/glyphicons-halflings-regular-fe185d11a49676890d47bb783312a0cda5a44c4039214094e7957b4c040ef11c.woff I, [2018-01-01T16:05:07.264510 #4745] INFO — : Writing /home/dracos/rails/video-store/public/assets/glyphicons-halflings-regular-fe185d11a49676890d47bb783312a0cda5a44c4039214094e7957b4c040ef11c.woff2 I, [2018-01-01T16:05:07.289833 #4745] INFO — : […]

Bootstrap Sass with Rails 4

我正在尝试在我的rails(4.0.0)项目中使用bootstrap-sass(3.1.0.2)和sass-rails(4.0.1)。 我的application.css.scss文件如下所示: /* * This is a manifest file that’ll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You’re free to […]