在Rails应用程序中将twitter bootstrap与simple_form一起使用时，如何格式化下拉菜单? [英] How can a dropdown be stylized when using twitter bootstrap with simple_form in a Rails app?

问题描述

我正在使用simple_form和twitter-bootstrap-rails gem.一切正常，但通过Twitter引导栏无法以某种方式使下拉菜单风格化.它像正常形式一样显示.

I am using simple_form and twitter-bootstrap-rails gems. Every thing is working fine but somehow drop-down is not getting stylized by twitter bootstrap rails ..it shows like normal forms.

<%= f.input :category, :collection => ["one", "two", "three", "four"],
    :input_html => {:class => 'dropdown'}, :label => 'Send To', prompt: "Choose From List" %>

下拉菜单显示的图像:

引导程序中所需的下拉图像

IMAGE OF DROPDOWN NEEDED AS IN BOOTSTRAP

推荐答案

一种通过 SimpleForm 获取样式化下拉菜单的方法a>和引导程序是要使用引导选择.有一个铁路宝石；添加到您的Gemfile并执行bundle:

One way to get stylized dropdowns with SimpleForm and Bootstrap is to use Bootstrap-Select. There is a Rails Gem for it; add to your Gemfile and do a bundle:

gem 'bootstrap-select-rails'

您需要将其添加到样式表中

You need to add it to your stylesheet

@import "bootstrap-select";

和Javascript.

and Javascript.

//= require bootstrap-select

现在，您需要做的就是在现有的f.input中使用input_html: {class: 'selectpicker'}:

Now, all you need to do is use input_html: {class: 'selectpicker'} in your existing f.input:

<%= f.input :category, :collection => ["one", "two", "three", "four"],
:input_html => {:class => 'selectpicker'}, :label => 'Send To', prompt: "Choose From List" %>

然后初始化Javascript(无论您有多少选择选择器，这都是一次性的):

and then initialize the Javascript (which is a one-off regardless of how many selectpickers you have):

<%= javascript_tag "$('.selectpicker').selectpicker();" %>

重新启动您的应用程序，您的输入下拉列表应使用Bootstrap样式呈现.

Restart your app and your input dropdown should render with Bootstrap styling.

一些可能有用的额外信息:您可以禁用提示项，以便不能通过从下拉菜单中添加disabled类来将其选中.我找不到有关 SimpleForm 的任何指导，如何将样式应用于集合的一个元素，但是我来了并按照以下说明对所有此类提示进行操作:

Some extra info that may be useful: you can disable the prompt item so that it cannot be selected from the dropdown by adding the disabled class to the item. I couldn't find any guidance on SimpleForm how to apply a style to one element of a collection but I came up with the below that does it to all such prompts:

<%= javascript_tag "$('li[data-original-index=0]').addClass('disabled');" %>

这篇关于在Rails应用程序中将twitter bootstrap与simple_form一起使用时，如何格式化下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！