标签: twitter-bootstrap-rails

字体很棒,输入类型'提交'

在font-awesome中似乎没有输入类型'submit'的类.是否可以使用font-awesome中的某些类来输入按钮?我已经在我的应用程序中为所有按钮添加了图标(实际上它们与来自twitter-bootstrap的类'btn'链接),但无法在'input type submit'上添加图标.

或者,如何使用此代码:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<input type="submit" id="image-button">Text</input>
Run Code Online (Sandbox Code Playgroud)

(我从HTML中获取:如何使用文本+图像制作提交按钮?)使用font-awesome?

twitter-bootstrap twitter-bootstrap-rails font-awesome

194
推荐指数
6
解决办法
23万
查看次数

未捕获的错误:没有这样的方法'显示'工具提示小部件实例

我正在使用ajax为我的注册提交表单,但是在尝试设置工具提示以显示从控制器返回的错误的错误消息时遇到问题.

JavaScript的:

$(document).on('ajax:success', '.user_modal_form', function(e, data, status, xhr) {
  var context;
  context = $(this);
  if (data.success) {
    $('button', context).hide();
    $('.spinner', context).show();
    location.reload();
  } else {
    if (data.errors != null) {
      $.each(data.errors, function(key, error) {
        var field;
        field = $("#athlete_" + key);
        field.attr('data-original-title', "" + key + " " + error).tooltip({
          trigger: 'manual'
        }).tooltip("show");
      });
    }
  }
});
Run Code Online (Sandbox Code Playgroud)

错误信息: Uncaught Error: no such method 'show' for tooltip widget instance

jquery twitter-bootstrap twitter-bootstrap-rails twitter-bootstrap-tooltip

42
推荐指数
2
解决办法
2万
查看次数

Bootstrap 3 + Rails 4 - 某些Glyphicons不工作

我想在我的rails 4 app中使用bootstrap 3.按照教程使用 github页面中的bootstrap saas设置bootstrap 3 .

Bootstrap工作正常,但glyphicons没有按预期工作.

某些字形根本没有显示.例如,我厌倦了在application.html.erb中显示其中一些进行测试:

glyphicon glyphicon-floppy-disk -> <span class="glyphicon glyphicon-floppy-disk"></span>
</br>
glyphicon glyphicon-plus -> <span class="glyphicon glyphicon-plus"></span>
</br>
glyphicon glyphicon-minus -> <span class="glyphicon glyphicon-minus"></span> 
Run Code Online (Sandbox Code Playgroud)

图标呈现像这样

软盘图标根本不呈现(显示无效的字符)加号和减号sig不是粗体,比bootstap网站上显示的要小得多.

我也在rails控制台上看到以下消息.

Started GET "/fonts/glyphicons-halflings-regular.woff" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.woff"):

Started GET "/fonts/glyphicons-halflings-regular.ttf" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

Started GET "/fonts/glyphicons-halflings-regular.svg" for 127.0.0.1 at 2014-02-22 16:29:54 -0800
ActionController::RoutingError (No route matches …
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap-rails ruby-on-rails-4 twitter-bootstrap-3

36
推荐指数
5
解决办法
3万
查看次数

如何在不使用mixin的情况下重用sass中的类?

我希望我的应用程序中的所有锚点看起来像.btn(Twitter Bootstrap类),有没有办法做到这一点?

我做到了

a{
  @include btn;
}
Run Code Online (Sandbox Code Playgroud)

但它不起作用,因为btn应该是一个mixin,它是一个Twitter Bootstrap类.

sass twitter-bootstrap twitter-bootstrap-rails

27
推荐指数
2
解决办法
3万
查看次数

在Rails中动态添加活动类到bootstrap li

在引导程序导航栏中.您可以通过添加类来获得单击按钮的效果active.当然,我想在我的网页上使用它.例如,如果我在关于我们的页面上,我想点击关于我们的按钮.

最好的方法是什么?我打算去每个页面,在底部有一个jQuery函数将类添加active到它.有没有更好的办法?

ruby-on-rails twitter-bootstrap twitter-bootstrap-rails

25
推荐指数
3
解决办法
2万
查看次数

如何将font-awesome图标嵌入到submit_tag中

尝试使用我的按钮的字体真棒图标,但我不能让它显示在submit_tag中

 <%= submit_tag icon("search"), class: "btn-primary", style:"width:40px;" %>
Run Code Online (Sandbox Code Playgroud)

输出:

 <input class="btn-primary" name="commit" style="width:40px;" type="submit" value="&lt;i class='icon-search' style='font-size:1em' &gt;&lt;/i&gt;">
Run Code Online (Sandbox Code Playgroud)

帮手:

def icon(name, size=1)
  #icon("camera-retro")
  #<i class="icon-camera-retro"></i> 

  html = "<i class='icon-#{name}' "
  html += "style='font-size:#{size}em' "
  html += "></i>"
  html.html_safe
end
Run Code Online (Sandbox Code Playgroud)

当我删除帮助器的html.html_safe行时,我得到同样的东西.它像html_safe一样无效.我也尝试过html = raw(html)也没有效果.

ruby-on-rails-3 twitter-bootstrap-rails font-awesome

18
推荐指数
1
解决办法
2万
查看次数

Rails + Twitter Bootstrap:导入未找到或不可读的文件:twitter/bootstrap

我正在尝试使用Twitter Bootstrap(gem twitter-bootstrap-rails)设置Rails应用程序,但我仍然无法克服错误

File to import not found or unreadable: twitter/bootstrap.
Run Code Online (Sandbox Code Playgroud)

我在宝石的官方Github上发现了这个问题,但没有一个解决方案对我有用.这是我的设置: Gemfile

gem "twitter-bootstrap-rails"
gem 'font-awesome-rails'
gem 'sass-rails',   '~> 3.2.3'
group :assets do
  #gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'therubyracer', :platforms => :ruby
  gem 'uglifier', '>= 1.0.3'
end
Run Code Online (Sandbox Code Playgroud)

application.css

 *= require_self
 *= require bootstrap_and_overrides
 *= require font-awesome
 *= require_tree .
Run Code Online (Sandbox Code Playgroud)

bootstrap_and_overrides.css.sass

@import "twitter/bootstrap";
@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

// Font Awesome
@import "fontawesome";

// Glyphicons
@import "twitter/bootstrap/sprites.scss";
Run Code Online (Sandbox Code Playgroud)

我错过了正确的设置?

谢谢

ruby gem ruby-on-rails twitter-bootstrap twitter-bootstrap-rails

18
推荐指数
3
解决办法
2万
查看次数

如何将Wrap Bootstrap主题集成到Rails应用程序中?

我从wrapbootstrap购买了一个twitter bootstrap主题.我已经有了一个功能轨道应用程序.现在,我想通过将引导主题集成到我的应用程序中来设计我的应用程序.我是新手,我不知道该怎么做.在对此进行了大量研究后,我发现只有很少有关于这个问题的讨论.例如,我发现这篇文章:在Rails App中实现WrapBootstrap主题

但是,我不完全确定主题中的资产将如何应用于我的应用程序.我已经复制了项目中的所有资源app/assets/images,app/assets/javascripts以及app/assets/stylesheets主题相应文件夹中的文件夹.然后,当我尝试在本地运行我的应用程序时,我收到了一些错误.我删除了我的application.css文件,之后就开始工作了.但是,我还看不到主题的任何设计.我应该怎么做才能使这个主题适用于我的rails应用程序?

ruby-on-rails ruby-on-rails-3 twitter-bootstrap twitter-bootstrap-rails ruby-on-rails-4

14
推荐指数
2
解决办法
3万
查看次数

如何让Twitter Bootstrap模态动画更快?

我非常喜欢Twitter Bootstrap模式,但用动画显示它有点慢.我说约500ms.

有没有办法让它更快?我看了看bootstrap-modal.js但找不到任何有用的东西.

并且,我不想完全停用动画,因为我发现这是一个很好的技巧,使用户眼中的响应时间看起来更快; o)

twitter-bootstrap twitter-bootstrap-rails

13
推荐指数
1
解决办法
2万
查看次数

如何设置bootstrap-datepicker-rails?

有谁知道如何设置gem bootstrap-datepicker-rails?我按照http://rubydoc.info/gems/bootstrap-datepicker-rails/0.6.21/frames中的步骤进行了基本操作:

  1. 我设置了twitter-bootstrap-rails宝石
  2. 我把它添加到gemfile gem 'bootstrap-datepicker-rails', '>= 0.6.21'
  3. 将此行添加到app/assets/stylesheets/application.css

    *= require bootstrap-datepicker
    
    Run Code Online (Sandbox Code Playgroud)
  4. 将此行添加到app/assets/javascripts/application.js

    //= require bootstrap-datepicker
    
    Run Code Online (Sandbox Code Playgroud)
  5. 将此行添加到app/assets/javascripts/controllername.js.coffee

    $('.datepicker').datepicker()
    
    Run Code Online (Sandbox Code Playgroud)
  6. 最后在视图中使用:)

    <input type="text" data-behaviour='datepicker' >
    
    Run Code Online (Sandbox Code Playgroud)

但它不起作用!! 有人有它上班吗?它应该工作得很好,如下所示:http:
//jsfiddle.net/2Gg5k/43/

datepicker jquery-ui-datepicker ruby-on-rails-3.2 twitter-bootstrap-rails

11
推荐指数
2
解决办法
2万
查看次数