标签: bootstrap-sass

我知道从Bootstrap网站下载Twitter Bootstrap时可能会对其进行自定义。bootstrap-sass gem怎么样？它总是包含所有功能吗？

我正在尝试使用bootstrap-sass(2.1.0.0)作为响应式设计的Ruby on Rails 3.2.8站点.这是我第一次尝试使用Rails或Bootstrap进行响应式设计.

问题是我的CSS样式中的一些(但不是全部)与适当的选择器匹配.具体来说,我.navbar-fixed-top在custom.css.scss中应用的自定义样式既出现在我编译的custom.css样式表中,也出现在浏览器中呈现的页面上.但是,响应式Bootstrap样式.navbar-fixed-top 出现在已编译的custom.css中(根据Chrome的Inspector),但不会出现在浏览器中呈现的页面上.

如果在custom.css.scss中,我更改@import "bootstrap-responsive";回默认值@import "bootstrap";,则引导程序样式将.navbar-fixed-top显示在呈现的页面上.这个问题似乎与具体的响应性有关.

我很难找到与我的具体问题相关的相关信息.在找到这个问题之后,我将Bootstrap默认meta name="viewport"标记更改为,但我的问题不是iPhone特定的.<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

我也一直在重新启动$ rails server这个问题.

我对如何进一步排除故障感到茫然.任何帮助将非常感激.

如何在使用Bootstrap的"预先"自动完成时为下拉列表中的活动项目设置自定义背景颜色？

一个小问题,但一个让我感到沮丧几个小时的问题!

我通过bootstrap-sass gem在Rails 3.2应用程序中使用Twitter Bootstrap.

我认为这是由下拉菜单样式控制的,但是

$dropdownLinkBackgroundHover: $customColor;

不起作用.

我也尝试了一种更具体的方法

.typeahead .active > a, .typeahead .active > a:hover { background-color: $customColor; }

但这似乎也不起作用.

我在俯瞰什么？或者我的修复工作是否有效,问题出在其他地方？

我有一个使用bootstrap-sass gem的rails应用程序.我想更改导航栏从平板电脑(979px)折叠到手机(769px)的宽度.覆盖媒体查询不是一个整洁的解决方案.

我已经编辑@navbarCollapseWidth了variables.less并构建了bootstrap,然后将内容bootstrap-responsive.css复制到了gem中的responsive.scss ... vendor/assets/stylesheets/bootstrap.然而,现在,我已经失去了更新宝石而不会丢失我的更改的能力.

这里最好的方法是什么？我想做出我认为简单的改变,但保持我的宝石更新能力.也许@import "bootstrap-responsive-mine";在application.css.scss中使用然后在需要时手动更新该文件？

我正在使用 bootstrap-sass。节点模块已安装。我应该期望我可以在任何 .scss 文件中使用以下行导入到适当的工作表中

@import 'bootstrap';

我的理解是编译器会爬行直到找到 package.json，跳入 node_modules 并找到合适的包。相反，我收到以下错误。

错误：未找到或无法读取要导入的文件：bootstrap

如果我用如下所示的完全限定路径替换我的导入，那么一切都会正常进行。

@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

我正在使用 gulp-sass 进行编译。猜测我只是关闭了一些小的配置位，但我无法弄清楚它是什么。

我需要重写Bootstrap（3.3.7）CSS中的某些内容，因此我需要在所有其他样式之前加载Bootstrap。我知道这样做的方法是将其导入styles.sass到文档顶部的应用程序主体中。但是当我通过以下方式执行此操作时：

@import ./bootstrap.css

我得到：

ERROR in ./~/css-loader!./src/bootstrap.css
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Users/bradley/Work/dashboard/src'
 @ ./~/css-loader!./src/bootstrap.css 6:4445-4497 6:4520-4572
 @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
 @ ./src/styles.sass
 @ multi ./src/styles.sass

ERROR in ./~/css-loader!./src/bootstrap.css
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff2' in '/Users/bradley/Work/dashboard/src'
 @ ./~/css-loader!./src/bootstrap.css 6:4622-4676
 @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
 @ ./src/styles.sass
 @ multi ./src/styles.sass

ERROR in ./~/css-loader!./src/bootstrap.css
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff' in '/Users/bradley/Work/dashboard/src'
 @ ./~/css-loader!./src/bootstrap.css 6:4707-4760
 @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
 @ ./src/styles.sass
 @ multi ./src/styles.sass

ERROR in ./~/css-loader!./src/bootstrap.css
Module not found: Error: …

试图追踪一些棘手的互动.也许你可以看到我错过的东西.感谢您花点时间看看这个!这是场景:

• 我正在使用sass-twitter-bootstrap github repo.已将整套scss文件复制到我的assets/twitter目录中

当我的application.css看起来像这样:

*= require_self
*= require twitter/bootstrap
*= require_tree .

刷新主页给出了这个错误:

Undefined variable: "$baseLineHeight".
  (in /Volumes/MonsterHD/mydev/repsurv/app/assets/stylesheets/twitter/_accordion.scss)

当我的application.css看起来像这样:

*= require_self
*= require twitter/bootstrap

然后我没有错误,但我的custom.css.scss没有应用.

我的custom.css.sccs看起来像这样:

@import "twitter/bootstrap";

/* universal */
html {
  overflow-y: scroll;
}
body {
  padding-top: 60px;
}
section {
  overflow: auto;
}
textarea {
  resize: vertical;
}
.center {
  text-align: center;
}
.center h1 {
  margin-bottom: 10px;
}

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: …

我正在尝试在我的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 add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new …

我在Rails 4中有一个表单,我想使用Bootstrap的单选按钮来设置二进制值,而不是使用复选框.

我正在使用Bootstrap的示例作为参考.

我希望它看起来像这样:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="options" id="option1"> True
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2"> False
  </label>
</div>

http://jsfiddle.net/52VtD/3456/

但这是我到目前为止(使用HAML):

.btn-group{"data-toggle" => "buttons"}
  %label.btn.btn-default
    = f.radio_button :single_use, true
    True
  %label.btn.btn-default
    = f.radio_button :single_use, false
    False

哪个产生:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <label class="radio" for="something_single_use_true">
      <input id="something_single_use_true" name="something[single_use]" type="radio" value="true"> 
    </label>
    Single use
  </label>
  <label class="btn btn-default">
    <label class="radio" for="something_single_use_false">
      <input checked="checked" id="something_single_use_false" name="something[single_use]" type="radio" value="false">
    </label>
    Unlimited use
  </label> …

我正在尝试使用Digital Ocean Droplet部署到Dokku.当Dokku尝试编译资产时 - 它会因上述错误而失败.我认为它可能是一个Dokku的东西(来自heroku它工作)所以试图在rake assets:precompile本地运行,所以我可以把它推到我的回购,然后到Dokku.

在本地得到相同的错误 Sprockets::FileNotFound: couldn't find file 'bootstrap'

以下是我的配置中的一些相关行:

production.rb

config.serve_static_assets = true

config.assets.compress = true

config.assets.compile = true

config.assets.digest = true

application.rb中

config.assets.initialize_on_precompile = false
config.assets.enabled = true
config.assets.version = '1.0'

我正在使用这些宝石和导轨3.2.13:

gem 'bootstrap-sass'

我//= require bootstrap在我的application.js文件中.

任何人都有如何处理这个的提示？

我有以下(和工作)动态菜单/下拉列表,它允许您选择属性类型,然后选择具有常规rails形式的属性子类型:

properties.js.coffee

jQuery ->
  prop_sub_types = $('#property_prop_sub_type_id').html()
  $('#property_prop_type_id').change ->
    prop_type = $('#property_prop_type_id :selected').text()
    escaped_prop_type = prop_type.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
    options = $(prop_sub_types).filter("optgroup[label='#{escaped_prop_type}']").html()
    if options
      $('#property_prop_sub_type_id').html(options)
    else
      $('#property_prop_sub_type_id').empty()

_form.html.erb

<%= form_for(@property) do |f| %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :prop_type_id, 'Property Type' %><br />
    <%= f.collection_select :prop_type_id, PropType.order(:name), :id, :name, :prompt => "-- Select Property Type --" %>
  </div>
  <div class="field">
    <%= f.label :prop_sub_type_id, 'Property Subtype' %><br />
    <%= f.grouped_collection_select :prop_sub_type_id, …